82.jpg

序言:
前面已經(jīng)介紹了如何在windows搭建flutter開發(fā)環(huán)境了,由于作者沒錢買mac和蘋果,所以目前只發(fā)布了windows和安卓的版本
那么,今天的內(nèi)容就是,如何開始寫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<FormState> _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: <Widget>[
                    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