/* 一、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, ), ); } }