圖片和Icon

加載網絡圖片以及本地圖片

 Image(
              image: NetworkImage(
                  "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB12IU4R.img?w=80&h=80&m=4&q=60"),
              width: 100.0,
            ),
            Image(image: AssetImage("graphics/ic_launcher.png"),
              width: 100.0,
              height: 100.0,
            )

color和colorBlendMode 進行顏色混合處理

 Image(
              image: AssetImage("graphics/ic_launcher.png"),
              width: 100.0,
              height: 100.0,
              color: Colors.blue,
              colorBlendMode: BlendMode.difference,
            )

整體的例子：
加載網絡圖片

import 'package:flutter/cupertino.dart';

class ImageAndIconRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var assetImage = AssetImage("graphics/ic_launcher.png");
    return SingleChildScrollView(
      child: Column(
          children: <Image>[
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.fill,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.contain,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.cover,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.fitWidth,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.fitHeight,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.none,
        ),
      ].map((e) {
        return Row(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(16.0),
              child: SizedBox(
                width: 100,
                child: e,
              ),
            ),
            Text(e.fit.toString())
          ],
        );
      }).toList()),
    );
  }
}

單選開關和復選框

switch和checkbox,繼承StateLessWidget
點擊switch和checkbox會觸發onchange回調

import 'package:flutter/material.dart';
// StatefulWidget 維護狀態需要繼承這個
class SwitchAndCheckboxRoute extends StatefulWidget{
  const SwitchAndCheckboxRoute({super.key});

  @override
  SwitchAndCheckboxRouteSate createState() => SwitchAndCheckboxRouteSate();
}

class SwitchAndCheckboxRouteSate extends State<SwitchAndCheckboxRoute>{
  bool switchSelected = true;
  bool checkboxSelected = true;
  @override
  Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Switch(
        value:switchSelected, onChanged: (bool value) {
          setState(() {
            switchSelected = value;
          });
      },),
      Checkbox(value: checkboxSelected,
        activeColor: Colors.red,
        onChanged: (bool? value) {
        setState(() {
          checkboxSelected = value!;
        });
      },
      )
    ],
  );
  }
}

輸入框以及表單

輸入框組件TextField

1. TextEditingController 編輯框控制器，設置，獲取，選擇，監聽文本改變事件。
2. FucusNode 是否占有鍵盤焦點。
3. InputDecoration TextField外觀顯示，提示文本，背景顏色，邊框等。
4. KeyboardType 鍵盤輸入類型

• text 文件輸入鍵盤
• multiline 多行文本
• number 數字鍵盤
• phone 電話號碼鍵盤
• datatime 日期輸入鍵盤
• emailAddress 電子郵件
• url url輸入鍵盤

輸入框例子：

            Column(
              children: const <Widget>[
                TextField(
                  autofocus: true,
                  decoration: InputDecoration(
                    labelText: "用戶名",
                    hintText: "請輸入用戶名",
                    prefixIcon: Icon(Icons.person)
                  ),
                ),
                TextField(
                  autofocus: true,
                  decoration: InputDecoration(
                      labelText: "密碼",
                      hintText: "請輸入密碼",
                      prefixIcon: Icon(Icons.lock)
                  ),
                  obscureText: true,
                )

              ],
            )

效果

控制焦點

import 'package:flutter/material.dart';

class FocusTestRoute extends StatefulWidget{
  const FocusTestRoute({super.key});

  @override
  FocusTestRouteState createState()=>FocusTestRouteState();
}

class FocusTestRouteState extends State<FocusTestRoute>{
  // FocusNode 控制焦點用
  FocusNode focusNode1 = FocusNode();
  FocusNode focusNode2 = FocusNode();
  // 移動焦點，設置默認焦點用
  late FocusScopeNode focusScopeNode;

  @override
  Widget build(BuildContext context) {
   return  Padding(
     padding: const EdgeInsets.all(16.0),
  child: Column(
      children: <Widget>[
        TextField(
          autofocus: true,
          focusNode: focusNode1,
          decoration: const InputDecoration(
            labelText: "input1"
          ),
        ),
        TextField(
          focusNode: focusNode2,
          decoration: const InputDecoration(
            labelText: "input2"
          ),
        ),
        Builder(builder: (ctx){
          return Column(
            children: <Widget>[
              TextButton(
                child: const Text("移動焦點"),
                onPressed: (){
                if(null==focusScopeNode){
                  focusScopeNode = FocusScope.of(context);
                }else{
                  // 焦點移動到第二個TextField
                  focusScopeNode.requestFocus(focusNode2);
                }
                },
              ),
              TextButton(
                child: const Text("隱藏鍵盤"),
                onPressed: (){
                  focusNode1.unfocus();
                  focusNode2.unfocus();
                },
              )
            ],
          );
        })
      ],
  ),
   );
  }
}

進度條

LinearProgressIndicator 橫向進度條
valueColor 進度條顏色
value 進度

 LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: const AlwaysStoppedAnimation(Colors.blue),
            ),
            LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: const AlwaysStoppedAnimation(Colors.blue),
              value: 0.5,
            )

圓形進度條

CircularProgressIndicator(
            backgroundColor: Colors.grey[200],
            valueColor: const AlwaysStoppedAnimation(Colors.blue),
            value: .5,
            )

指定進度條寬高SizedBox

SizedBox(
              height: 10,
              child: LinearProgressIndicator(
                backgroundColor: Colors.grey[200],
                valueColor: const AlwaysStoppedAnimation(Colors.blue),
              ),
            ),

10s由綠變紅例子

import 'package:flutter/material.dart';

class ProgressRoute extends StatefulWidget {
  const ProgressRoute({super.key});

  @override
  ProgressRouteState createState() => ProgressRouteState();
}

class ProgressRouteState extends State<ProgressRoute>
    with SingleTickerProviderStateMixin {
  late AnimationController animationController;

  @override
  initState() {
    animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 10));
    animationController.forward();
    animationController.addListener(() => setState(() {}));
    super.initState();
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Padding(padding: const EdgeInsets.all(16),
              child: LinearProgressIndicator(
                backgroundColor: Colors.grey[200],
                valueColor: ColorTween(begin: Colors.green, end: Colors.red).animate(animationController),
                value: animationController.value,
              )
          ),

        ],
      ),
    );
  }
}