23Flutter FloatingActionButton实现类似闲鱼App底部导航凸起按钮：

/*
一、Flutter FloatingActionButton介绍
FloatingActionButton简称FAB,可以实现浮动按钮，也可以实现类型闲鱼app的底部凸起导航。
child:子视图，一般为Icon,不推荐使用文字。
tooltip:FAB被长按时显示，也是无障碍功能
backgroundColor:背景颜色
elevation:未点击的时候的阴影
hignlightElevation:点击时阴影值，默认12.0
onPressed:点击事件回调
shape:可以定义FAB的形状等。
mini:是否是mini类型默认false
*/

Tabs.dart【设置闲鱼APP凸起按钮方法】

import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';

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

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  _TabsState(index) {
    this._currentIndex = index;
  }
  List _pageList = [HomePage(), CategoryPage(), SettingPage()];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      floatingActionButton: Container(
        height: 80,
        width: 80,
        padding: EdgeInsets.all(8),
        margin: EdgeInsets.only(top: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(40),
          color: Colors.white
        ),
        child: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            // print("floatingActionButton tabs");
            setState(() {
              this._currentIndex=1;
            });
          },
          backgroundColor: this._currentIndex==1?Colors.red:Colors.yellow,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,
          onTap: (int index) {
            // print(index);
            setState(() {
              this._currentIndex = index;
            });
          },
          iconSize: 36.0,
          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.red,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
            BottomNavigationBarItem(
                icon: Icon(Icons.category), title: Text('分类')),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings), title: Text('设置')),
          ]),
      body: this._pageList[this._currentIndex],
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                // Expanded(
                //   child: DrawerHeader(
                //     child: Text('你好Flutter'),
                //     decoration: BoxDecoration(
                //       // color: Colors.yellow
                //       image: DecorationImage(
                //         image: NetworkImage('https://www.itying.com/images/flutter/2.png'),
                //         fit:BoxFit.cover
                //       ),
                //     ),
                //   )
                // )

                Expanded(
                  child: UserAccountsDrawerHeader(
                    accountName: Text('老师你好'),
                    accountEmail: Text('gztt@163.com'),
                    currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage(
                          'https://www.itying.com/images/flutter/3.png'),
                    ),
                    decoration: BoxDecoration(
                      // color: Colors.yellow
                      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/5.png'),
                      Image.network(
                          'https://www.itying.com/images/flutter/4.png')
                    ],
                  ),
                )
              ],
            ),
            ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.home),
                ),
                title: Text('我的空间')),
            Divider(),
            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.home),
              ),
              title: Text('用户中心'),
            )
          ],
        ),
      ),
      endDrawer: Drawer(
        child: Text('右侧侧边栏'),
      ),
    );
  }
}

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: () {},
            )
          ],
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add,color: Colors.black,size: 40),
          onPressed: (){
            print("floatingActionButton");
          },
          backgroundColor: Colors.yellow,

        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        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,
      ),
    );
  }
}

 

转载于:https://www.cnblogs.com/yiweiyihang/p/11512814.html