flutter ui

快速生成無狀態模板

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

 

快速生成有狀態模板

 

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

 

 

1.MaterialApp

腳手架模板

 有狀態

import 'package:flutter/material.dart';


void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("測試"),
        ),
        body:Center(child: Text('data'),)
      ),
    );
  }
}

 

2.Scaffold

 

 

3.AppBar

return Scaffold(
      appBar: AppBar(
        leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: () {}),
        title: Text('AppBar'),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.add), onPressed: () {}),
          IconButton(icon: Icon(Icons.add), onPressed: () {}),
        flexibleSpace: Container(
          color: Colors.red,
        ),
        bottom: PreferredSize(
          child: Container(
            height: 50,
            width: double.infinity,
            color: Colors.grey,
            child: Text('bottom'),
          ),
          preferredSize: Size(30, 100),
        ),
      ),
    ); 

 

 

 

4.文本框

new Text('文本框');

屬性

 

 

 

 

 

 

監聽一

 onChanged：每次改變接受文本的值

onSubmitted:每次按輸入法的肯定鍵接收一個值

 

監聽二

 

 

 

 

 

4.按鈕


        child: new MaterialButton(
            onPressed: null,
            child: new Text('按鈕'),
            color: Colors.blue,
        ),

 

 

5.彈出提示

        child: new MaterialButton(
            onPressed: (){
              Scaffold.of(context).showSnackBar(
                  new SnackBar(content: new Text("提示信息：")));
            },
            child: new Text('按鈕'),
            color: Colors.blue,
        ),

 

 

 

輸入框

new TextField(
      //
    );

 

6.toast

依賴  fluttertoast: ^2.1.1

import 'package:fluttertoast/fluttertoast.dart';

MaterialButton(
      child: Text("a"),
      onPressed: (){
        Fluttertoast.showToast(
            msg: "This is Center Short Toast",
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            timeInSecForIos: 20,

        );
      },
    );

 

7.加載中

flutter_spinkit: ^3.1.0

import 'package:flutter_spinkit/flutter_spinkit.dart';

SpinKitFadingCircle(
      itemBuilder: (_, int index) {
        return DecoratedBox(
          decoration: BoxDecoration(
            color: index.isEven ? Colors.red : Colors.green,
          ),
        );
      },
    );

 

 8.TabBar

unselectedLabelColor: 設置未被選中的標籤顏色

indicatorColor:選中標籤的下劃線顏色

indicatorSize:選中下劃線的長度

 

 

.主題

splashColor：水波紋顏色

 

 

.裝飾盒子

decoration:BoxDecoration(

)

border:設置邊框

borderRadius：圓角設置

borderShdow:陰影

..shape：形狀

..gradient：漸變

image：

 

 

sizeBox

固定尺寸盒子

 

alignment

對齊

 

0.0表示居中

stack 

疊加

 

AspectRatio 設置寬高比

 

 

pageView 翻頁

 

SimpleDialog 

AlertDialog

barrierDismissible 點外面不會取消對話框

 

 

bottomSheet 底部滑動

 

 

 

 

 ExpansionPanel 收縮面板

 

chip  

 ActionChip

FilterChip

ChoiceChip

 

warp

 

Divider

 分隔符

 DataTable

 

 stepper

 

 

RefreshIndicator 下拉

TabBarView

 

 主題顏色