【自学Flutter】2.2 自定义按钮样式

2.2 自定义按钮样式

1.源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'Text widget usage',
      home:Scaffold(
          body:
          Center(
              child:
              FlatButton(
                  onPressed: () => {},
                  color: Colors.orange,
                  highlightColor: Colors.red,
                  colorBrightness: Brightness.dark,
                  splashColor: Colors.blue,
                  child: Text("我是自定义按钮"),
                  shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0))
              )
          )
      ),
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'Text widget usage',
      home:Scaffold(
          body:
          Center(
              child:
              FlatButton(
                  onPressed: () => {},
                  //按钮背景颜色
                  color: Colors.orange,
                  //按钮按下时的背景颜色
                  highlightColor: Colors.red,
                  //按钮主题，默认是浅色主题 
                  colorBrightness: Brightness.dark,
                  //点击时，水波动画中水波的颜色
                  splashColor: Colors.blue,
                  //按钮文本
                  child: Text("我是自定义按钮"),
                  //按钮形状
                  shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0))
              )
          )
      ),
    );
  }
}

3.效果图