22Flutter中的常見的按鈕組件 以及自定義按鈕組件

/*
Flutter中的常見的按鈕組件 以及自定義按鈕組件
一、Flutter中的按鈕組件介紹
Flutter里有很多的Button組件，常見的按鈕組件有：RaisedButton/FlatButton/IconButton/
OutlineButton/ButtonBar/FloatingActionButton等。
RaisedButton:凸起的按鈕，其實就是Material Design風格的Button
FlatButton:扁平化的按鈕
OutlineButton:線框按鈕
IconButton:圖標按鈕
ButtonBar: 按鈕組
FloatingActionButton:浮動按鈕

二、Flutter按鈕組件中的一些屬性：
onPressed:必填參數，按下按鈕時觸發的回調，接受一個方法，傳null表示按鈕禁用，會顯示禁用相關樣式
child:文本控件
textColor:文本顏色
color:按鈕的顏色
disabledColor:按鈕禁用時的顏色
disabledTextColor:按鈕禁用時的文本顏色
splashColor:點擊按鈕時水波紋的顏色
elevation:陰影的范圍
padding:內邊距
shape:設置按鈕的形狀
*/

Button.dart

import 'package:flutter/material.dart';

class ButtonDemoPage extends StatelessWidget {
  const ButtonDemoPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('按鈕演示頁面'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {},
            )
          ],
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              children: <Widget>[
                RaisedButton(
                  child: Text('普通'),
                  onPressed: () {
                    print('普通按鈕');
                  },
                ),
                SizedBox(width: 5),
                RaisedButton.icon(
                  icon: Icon(Icons.search),
                  label: Text('圖標'),
                  onPressed: null,
                ),
                SizedBox(width: 10),
                RaisedButton(
                  child: Text('有顏色'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  onPressed: () {
                    print('有顏色按鈕');
                  },
                ),
                SizedBox(width: 10),
                RaisedButton(
                    child: Text('有陰影'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 10,
                    onPressed: () {
                      print('有陰影按鈕');
                    }),
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  height: 50,
                  width: 400,
                  child: RaisedButton(
                    child: Text('寬度高度'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: () {},
                  ),
                )
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                    child: Container(
                  height: 60,
                  margin: EdgeInsets.all(10),
                  child: RaisedButton(
                    child: Text('自適應按鈕'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: () {
                      print('自適應按鈕');
                    },
                  ),
                ))
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: Text('圓角按鈕'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  elevation: 20,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)),
                  onPressed: () {
                    print('圓角按鈕');
                  },
                ),
                RaisedButton(
                  child: Text('圓形按鈕'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  elevation: 20,
                  splashColor: Colors.grey,
                  shape: CircleBorder(side: BorderSide(color: Colors.white)),
                  onPressed: () {
                    print('圓形按鈕');
                  },
                )
              ],
            ),
            FlatButton(
              //扁平化按鈕：
              child: Text('扁平化的按鈕'),
              color: Colors.blue,
              textColor: Colors.yellow,
              onPressed: () {},
            ),
            OutlineButton(
              child: Text('線框按鈕'),
              onPressed: () {
                print('OutlineButton');
              },
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(20),
                    height: 50,
                    child: OutlineButton(
                      child: Text('注冊'),
                      onPressed: () {},
                    ),
                  ),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ButtonBar(
                  //按鈕組
                  children: <Widget>[
                    RaisedButton(
                      child: Text('登錄'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      onPressed: () {},
                    ),
                    RaisedButton(
                      child: Text('注冊'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      onPressed: () {},
                    ),
                  ],
                )
              ],
            ),
            MyButton(
              text: "自定義按鈕",
              height: 60.0,
              width: 100.0,
              pressed: () {
                print("自定義按鈕");
              },
            )
          ],
        ));
  }
}

//自定義按鈕組件：
class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final double width;
  final double height;
  const MyButton(
      {this.text = '', this.pressed = null, this.width = 80, this.height = 30});
  @override
  Widget build(BuildContext context) {
    return Container(
      height: this.height,
      width: this.width,
      child: RaisedButton(
        child: Text(this.text),
        onPressed: this.pressed,
      ),
    );
  }
}