Flutter 按钮组件

文件结构：

内容承接：https://blog.csdn.net/u013227399/article/details/103787189

routes.dart

import 'package:flutter/material.dart';
import '../pages/tabs.dart';
import '../pages/Button.dart';

final routes = {
  '/': (context) => Tabs(),
  '/button':(context) => ButtonPage(),
};

var onGenerateRoute=(RouteSettings settings){
  //统一处理
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
        builder: (context) =>
            pageContentBuilder(context, arguments: settings.arguments),
      );
      return route;
    } else {
      final Route route = MaterialPageRoute(
        builder: (context) => pageContentBuilder(context),
      );
      return route;
    }
  }
};

button.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('按钮演示'),
      ),
      body: ListView(
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('以下为RaisedButton演示'),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    child: Text('普通按钮'),
                    onPressed: () {
                      print('普通按钮');
                    },
                  ),
                  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.0,
                    onPressed: () {
                      print('阴影按钮');
                    },
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    child: Text('禁用按钮'), //按钮文本
                    elevation: 10.0, //阴影
                    disabledColor: Colors.black26, //禁用按钮颜色
                    disabledTextColor: Colors.black26, //禁用文本颜色
                    onPressed: null, //禁用按钮
                  ),
                  SizedBox(width: 10),
                  Container(
                    width: 100,
                    child: RaisedButton(
                      child: Text('宽度按钮'),
                      onPressed: () {
                        print('宽度按钮');
                      },
                    ),
                  ),
                  SizedBox(width: 10),
                  RaisedButton.icon(
                    icon: Icon(Icons.search),
                    label: Text('图标按钮'),
                    onPressed: () {
                      print('图标按钮');
                    },
                  )
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    child: Container(
                      child: RaisedButton(
                        child: Text('自适应按钮'),
                        onPressed: () {
                          print('自适应按钮');
                        },
                      ),
                    ),
                  )
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    child: Text('圆角按钮'), //按钮文本
                    elevation: 10.0, //阴影
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10), //圆角按钮
                    ),
                    color: Colors.blue, //按钮颜色
                    textColor: Colors.white, //按钮文字颜色
                    onPressed: () {
                      print('圆角按钮');
                    },
                  ),
                  SizedBox(width: 10),
                  Container(
                    width: 100,
                    height: 100,
                    child: RaisedButton(
                      child: Text('圆形按钮'), //按钮文本
                      elevation: 10.0, //阴影
                      shape: CircleBorder(
                        side: BorderSide(color: Colors.white), //圆形按钮
                      ),
                      splashColor: Colors.red, //点击时水波纹颜色
                      color: Colors.blue, //按钮颜色
                      textColor: Colors.white, //按钮文字颜色
                      onPressed: () {
                        print('圆形按钮');
                      },
                    ),
                  ),
                ],
              ),
              SizedBox(height: 20),
              Text('以下为FlatButton演示'),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  FlatButton(
                    child: Text('扁平化按钮'),
                    color: Colors.red,
                    textColor: Colors.white,
                    onPressed: () {
                      print('扁平化按钮');
                    },
                  ),
                ],
              ),
              SizedBox(height: 20),
              Text('以下为OutlineButton演示'),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  OutlineButton(
                    child: Text('线框按钮'),
                    // color: Colors.red, //无效
                    // textColor: Colors.red,
                    onPressed: () {
                      print('线框按钮');
                    },
                  ),
                ],
              ),
              SizedBox(height: 20),
              Text('以下为IconButton演示'),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.search),
                    onPressed: () {
                      print('图标按钮');
                    },
                  ),
                ],
              ),
              SizedBox(height: 20),
              Text('以下为ButtonBar演示'),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  ButtonBar(
                    children: <Widget>[
                      RaisedButton(
                        child: Text('按钮组1'),
                        onPressed: null,
                      ),
                      RaisedButton(
                        child: Text('按钮组2'),
                        onPressed: () {
                          print('按钮组2');
                        },
                      ),
                    ],
                  ),
                ],
              ),
              SizedBox(height: 20),
              Text('以下为自定义按钮演示'),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  MyButton(
                    text: '自定义按钮',
                    width: 120,
                    height: 30,
                    pressed: () {
                      print('点击自定义按钮');
                    },
                  ),
                ],
              ),
              SizedBox(height: 20),
            ],
          ),
        ],
      ),
    );
  }
}

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(
      width: this.width,
      height: this.height,
      child: RaisedButton(
        child: Text(this.text),
        onPressed: this.pressed,
      ),
    );
  }
}

tabs.dart

import 'package:flutter/material.dart';
import 'tabs/home.dart';
import 'tabs/category.dart';
import 'tabs/user.dart';

class Tabs extends StatefulWidget {
  final index;
  Tabs({Key key, this.index = 0}) : super(key: key);
  @override
  _TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State<Tabs> {
  int _currentIndex;
  _TabsState(index) {
    this._currentIndex = index;
  }

  List _pageList = [
    HomePage(),
    CategoryPage(),
    UserPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('按钮组件'),
      ),
      floatingActionButton: Container(
        width: 80,
        height: 80,
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.only(bottom: 20),
        //画圆边
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(40),
          color: Colors.white,
        ),
        child: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            print('浮动按钮');
            //触发分类按钮
            setState(() {
              this._currentIndex = 1;
            });
          },
          backgroundColor: this._currentIndex == 1 ? Colors.blue: Colors.red, //选中效果
        ),
      ),
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerDocked, //更改浮动位置
      body: this._pageList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap: (int index) {
          setState(() {
            this._currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            title: Text('分类'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.supervised_user_circle),
            title: Text('会员'),
          ),
        ],
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: UserAccountsDrawerHeader(
                    accountName: Text('账户名称'),
                    accountEmail: Text('123456789@qq.com'),
                    currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage(
                          'https://www.itying.com/images/flutter/3.png'),
                    ), //用户头像
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: NetworkImage(
                            'https://www.itying.com/images/flutter/2.png'),
                        fit: BoxFit.cover,
                      ),
                    ), //背景
                    otherAccountsPictures: <Widget>[
                      Image.network(
                          'https://www.itying.com/images/flutter/4.png'),
                      Image.network(
                          'https://www.itying.com/images/flutter/5.png'),
                      Text('data')
                    ],
                  ),
                ),
              ],
            ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
              title: Text('我的空间'),
              //侧边栏跳转
              onTap: () {
                Navigator.of(context).pop(); //隐藏侧边栏
                Navigator.pushNamed(context, '/user');
              },
            ),
            Divider(), // 增加一条线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.people),
              ),
              title: Text('用户中心'),
            ),
            Divider(), // 增加一条线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
              title: Text('设置'),
            ),
          ],
        ),
      ),
    );
  }
}

 

效果展示：

注：浮动按钮的主要片段