flutter(二,写一个简单的flutter界面)

82.jpg

序言:
前面已经介绍了如何在windows搭建flutter开发环境了,由于作者没钱买mac和苹果,所以目前只发布了windows和安卓的版本
那么,今天的内容就是,如何开始写flutter代码了

ok,开始正文

1.flutter是跨平台的,也就是说,一套界面可以用在很平台上,除了Android可以用,ios也可以用.那么,还是通过java语言来编写代码的吗?
不是的,用的是dart语言.dart语言很简单上手,如果是又java功底的,dart上手是没有难度的.

2.编写界面的位置
我们在lib>main.dart开始编写

代码如下:
看不懂的去稍微看一下dart语法就好了

import 'package:flutter/material.dart';

void main()=>runApp(
  MaterialApp(
    title: 'simple login',
    home: AppPage(),
  )
);

class AppPage extends StatelessWidget{

  GlobalKey _loginKey = new GlobalKey();

  String _username;
  String _password;

  void _login(){
    var loginForm = _loginKey.currentState;
    if(loginForm.validate()){
      loginForm.save();
      print('user name = $_username --- pass word = $_password');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('login test'),
      ),
      body: Container(
        margin: EdgeInsets.all(16.0),
        child: Center(
          child: Form(
              key: _loginKey,
              child: Center(
                child: Column(
                  children: [
                    TextFormField(
                      decoration: InputDecoration(
                        labelText: '请输入用户名:',
                        hintText: '请输入用户名:',
                        border: OutlineInputBorder()
                      ),
                      onSaved: (val){
                        _username=val;
                      },
                      onFieldSubmitted: (val){},
                      validator: (val){
                        if(val.length==0)return'用户名不能为空';
                      },
                    ),
                    SizedBox(
                      height: 30.0,
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                        labelText: '请输入密码:',
                        hintText: '请输入密码',
                        border: OutlineInputBorder()
                      ),
                      onSaved: (val){
                        _password=val;
                      },
                      onFieldSubmitted: (val){},
                      validator: (val){
                        if(val.length < 3) return '密码不能小于3个字符';
                        if(val.length > 6) return '密码不能大于6个字符';
                        else return null;
                      },
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 30.0),
                      child:SizedBox(
                        width: 400.0,
                        height: 45.0,
                        child: RaisedButton(
                            onPressed: _login,
                          child: Text(
                              '登陆',
                              style: TextStyle(color: Colors.black,fontSize: 20.0)
                          )
                        ),
                      ),
                    )
                  ],
                ),
              )
          ),
        ),
      ),
    );
  }

}

好了,这就是一个简单的用户登陆界面了,把代码copy进去跑一下,就可以看到界面效果哦

721.jpg