預先準備

Widget

Flutter 框架中的核心物件，他可以被加入到畫面的渲染樹中，如果有新的 Widget 將會被取代，不具備可變的狀態，我們也不會去繼承它，如果需要可變的的狀態可以直接繼承 StatefulWidget，所以基本上跟畫面有關的物件都是來自 Widget。

StatelessWidget

在特定的配置和環境下都不會改變狀態，都用同樣方式建構，不能重複建構。
基本使用

 class LoginBtn extends StatelessWidget {
   const LoginBtn({ Key key }) : super(key: key);
   @override
   Widget build(BuildContext context) {
     return MaterialButton(color: const Color(0xFF2DBD3A));
   }
 }

我們可以改造一下讓它有基本的設定值

//增加 color 跟 child
class LoginBtn extends StatelessWidget {
  const LoginBtn({
    Key key,
    this.color = const Color(0xFF2DBD3A),
    this.child ,
  }) : super(key: key);

  final Color color ;
  final Widget child ;

  @override
  Widget build(BuildContext context) {
    return  RaisedButton(color: color,child: child , onPressed: (){},);
  }
}

StatefulWidget

擁有 State，可以被重複建構，每次的建構都可以隨著 State 的狀態改變。

登入頁面裡的狀態會隨著登入後做改變，所以我選擇用 StatefulWidget

class LoginPage extends StatefulWidget{
  LoginPage({Key key, this.title}):super(key:key);
  final String title ;

  @override
  State<StatefulWidget> createState() {
    //需要實做一個屬於 LoginPage 的 State
    return _LoginPageState();
  }
}

implement state

enum LoginStatus {
 success,wait,failed,logined,yet
}
class _LoginPageState extends State<LoginPage>{
  LoginStatus _loginStatus = LoginStatus.yet ;
  String tail = "" ;
  
   void _login(){
   //當登入成功後改變狀態，呼叫 setState() 更新 widget
    _loginStatus = LoginStatus.success ;
    if (_loginStatus == LoginStatus.success){
        tile = "SUCCESS" ;
    }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

Scaffold

實作了 material design 在頁面上基本的一些 layout 配置
包含 app bar , body , bottom sheet

//把一開始做的 LoginBtn 加入 
final loginBtn  =  LoginBtn() ;
return Scaffold(
    appBar:AppBar(
        title: Text(widget.title+" "+tail),
    ),
    body: Center(child: loginBtn,),
);

將上面三個 widget 組合起來看

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginPage(title: "LOGIN",),
    );
  }
}

一個簡單的畫面

Stack

Container

Column