flutter button RaisedButton(已经弃用改用ElevatedButton)组件

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组件  RaisedButton(已经弃用改用ElevatedButton)组件

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点击事件"),
                ),
              ],
            ),
          )
      ),
    );
  }
}

带水波纹效果喔

基于以下文档：
FlatButton、RaisedButton和OutlineButton已分别由TextButton、ElevatedButton和OutlinedButton取代。

ButtonTheme已由TextButtonTheme、ElevatedButtonTheme和OutlinedButtonTheme取代。

原始类别最终会被移除，请移转使用它们的程式码。flutter.dev/go/material-button-migration-guide中有新按钮和按钮主题类别的详细移转指南。