flutter button RaisedButton組件

1.普通button

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Gesture Demo';

    return new MaterialApp(
      title: title,
      home: new MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar:  AppBar(
        title:  Text(title),
      ),
      body: new Center(child: new MyButton()),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Our GestureDetector wraps our button
    return  GestureDetector(
      // When the child is tapped, show a snackbar
      onTap: () {
        final snackBar = new SnackBar(content: new Text("Tap"));

        Scaffold.of(context).showSnackBar(snackBar);
      },
      // Our Custom Button!
      child:  Container(
        padding:  EdgeInsets.all(12.0),
        decoration:  BoxDecoration(
          color: Theme.of(context).buttonColor,
          borderRadius:  BorderRadius.circular(8.0),
        ),
        child: new Text('My Buttons'),
      ),
    );
  }
}

 

 

 

RaisedButton組件

import 'package:flutter/material.dart';

void main() {
  runApp( MaterialApp(
    title: 'Flutter gesture',
    home: LearnListView(),
  ));
}
class LearnListView extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return new _LearnListView();
  }
}
class _LearnListView extends State<StatefulWidget>{

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'RaisedButton Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('SingleChildScrollView Demo'),
        ),
          body: Container(
            padding: EdgeInsets.all(10.0),
            child: Column(
              children: <Widget>[
                RaisedButton(
                  onPressed: () {},
                  child: Text("textColor文本的顏色，color背景顏色，highlightColor按鈕按下的顏色"),
                  textColor: Color(0xffff0000),
                  color: Color(0xfff1f1f1),
                  highlightColor: Color(0xff00ff00),
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text("disabledTextColor禁用時文本顏色，disabledColor禁用時背景顏色"),
                  disabledTextColor: Color(0xff999999),
                  disabledColor: Color(0xffff0000),
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text("splashColor水波的顏色，disabledColor禁用時背景顏色"),
                  splashColor: Color(0xffff0000),
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text("colorBrightness按鈕主題高亮 Brightness.light"),
                  colorBrightness: Brightness.light,
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text("colorBrightness按鈕主題高亮 Brightness.dark"),
                  colorBrightness: Brightness.dark,
                ),
                Container(
                  margin: EdgeInsets.only(top: 20.0),
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text(
                        "elevation按鈕下面的陰影,highlightElevation高亮時候的陰影,disabledElevation按下的時候的陰影"),
                    elevation: 5.0,
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 20.0),
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text(
                        "elevation按鈕下面的陰影,highlightElevation高亮時候的陰影,disabledElevation按下的時候的陰影"),
                    highlightElevation: 5,
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 20.0),
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text(
                        "elevation按鈕下面的陰影,highlightElevation高亮時候的陰影,disabledElevation按下的時候的陰影"),
                    disabledElevation: 5.0,
                  ),
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text(
                      "onHighlightChanged 水波紋高亮變化回調,按下返回true,抬起返回false"),
                  onHighlightChanged: (bool b) {
                    print(b);
                  },
                ),
                RaisedButton(
                  onPressed: () {
                    print("點擊了");
                  },
                  child: Text("onPressed點擊事件"),
                ),
              ],
            ),
          )
      ),
    );
  }
}

帶水波紋效果喔