How to add notch to TabBar to place FloatingActionButton in it - dart

I would like to create a notch inside the TabBar to place the FloatingActionBottom in it but I don't know how to do that.
I found nothing in the documentations or on the internet.

You can use the Bottom App Bar for this kind of User Interface
The hasNotch property of the BottomAppBar must be true.
This would get you what I am upto
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(title: const Text('Bottom App Bar')),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add), onPressed: () {},),
bottomNavigationBar: BottomAppBar(
hasNotch: true,
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.menu), onPressed: () {},),
IconButton(icon: Icon(Icons.search), onPressed: () {},),
],
),
),
);
}
Thank You!

Try implementing this revised version of the code. The FAB should persist across the three tabs
class BarTab extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.audio),
Icon(Icons.play),
Icon(Icons.maps),
],
),
floatingActionButton: FloatingActionButton(
onpressed:(){},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar:BottomAppBar(
color:Colors.blue,
hasNotch: true,
child:Container(
height:50.0
child:Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: (){})
]
)
)
),
),
);
}

2020 solution:
hasNotch property is no more in BottomAppBar, however, you can do this in Scaffold
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(), //this is what creates the notch
color: Colors.blue,
child: SizedBox(
height: height * 0.1,
width: width,
),
),
floatingActionButton: Container(
margin: EdgeInsets.all(10),
width: 80.0,
height: 80.0,
child: FloatingActionButton(
onPressed: () {},
child: Icon(
Icons.add,
size: 25.0,
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked
output :

Related

How to fill the row with two buttons?

How to make two buttons expand equally over the entire width of the Navigation Drawer?
The main thing will be
ListTile(
title: Row(
children: <Widget>[
Expanded(child: RaisedButton(onPressed: () {},child: Text("Clear"),color: Colors.black,textColor: Colors.white,)),
Expanded(child: RaisedButton(onPressed: () {},child: Text("Filter"),color: Colors.black,textColor: Colors.white,)),
],
),
)
Complete Code
class SO extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Update the state of the app
// ...
},
),
ListTile(
//contentPadding: EdgeInsets.all(<some value here>),//change for side padding
title: Row(
children: <Widget>[
Expanded(child: RaisedButton(onPressed: () {},child: Text("Clear"),color: Colors.black,textColor: Colors.white,)),
Expanded(child: RaisedButton(onPressed: () {},child: Text("Filter"),color: Colors.black,textColor: Colors.white,)),
],
),
)
],
),
),
);
}
}
This worked for me
Row(
children: <Widget>[
RaisedButton(
onPressed: () {
Route route =
MaterialPageRoute(builder: (context) => MinionFlare());
Navigator.push(context, route);
},
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.4,
child: Text("Minion"),
),
),
RaisedButton(
onPressed: () {
Route route = MaterialPageRoute(
builder: (context) => EmojiRatingBar());
Navigator.push(context, route);
},
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.4,
child: Text("Emoji")),
),
],
),
You can wrap each button with Expanded.
Row(
children : <Widget>[
Expanded(
child: Button(
child: Text("Clear")
)
),
Expanded(
child: Button(
child: Text("Filter")
)
),
])
Container(
height: 100,
child: Row(
children : <Widget>[
Expanded(
child: RaisedButton(
onPressed: () {},
color: Color(0xff0000ff),
child: Text("Left Button", style: TextStyle(color: Colors.white),)
)
),
Expanded(
child: RaisedButton(
onPressed: () {},
color: Color(0xffd4d4d4),
child: Text("Right Button")
)
),
])
)

How to add Drawer for SliverAppBar

This is my code, copied from here:
SliverAppBar(
expandedHeight: 150.0,
flexibleSpace: const FlexibleSpaceBar(
title: Text('Available seats'),
),
actions: < Widget > [
IconButton(
icon: const Icon(Icons.add_circle),
tooltip: 'Add new entry',
onPressed: () { /* ... */ },
),
]
)
But I need to add a Drawer. How can I do that?
I am trying to rebuild my app in Flutter.
Converting java android app to flutter
I replaced the icon but how can I create a Drawer?
leading: IconButton(icon: Icon( Icons.menu ),onPressed: ()=>{},)
My full code
#override
Widget build(BuildContext context) {
return NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () => {},
),
actions: <Widget>[
IconButton(
onPressed: () => {},
icon: Icon(Icons.shopping_cart),
)
],
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("My Pet Shop",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Image.network(
"https://firebasestorage.googleapis.com/v0/b/my-pet-world.appspot.com/o/images%2Fbannerads%2FxTmAblJI7fMF1l0nUa1gM32Kh9z1%2F734rm6w7bxznp%2FPETWORLD-HOME-SLIDER-KITTENS.webp?alt=media&token=cf7f48bb-6621-47b3-b3f8-d8b36fa89715",
fit: BoxFit.cover,
)),
),
];
},
body: Container(
margin: EdgeInsets.only(top: 0),
child: Column(
children: <Widget>[
Expanded(
//getHomePageWidget()
child: ListView(
padding: EdgeInsets.all(0.0),
children: <Widget>[getHomePageWidget()],
),
)
],
),
));
}
Drawer is a property for Scaffold. Once you set a drawer property, the menu icon will automatically appear in the SliverAppBar.
Return this inside your build method, and you will get what you are looking for.
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 200.0,
flexibleSpace: const FlexibleSpaceBar(
title: Text('Available seats'),
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add_circle),
tooltip: 'Add new entry',
onPressed: () {},
),
],
),
SliverList(
delegate: SliverChildListDelegate([
getHomePageWidget(),
]),
),
],
),
drawer: Drawer(),
);
NOTE: if you have multiple Scaffold in the tree above the CustomScrollView than the Drawer should be in the most bottom Scaffold

Change background color of Tab bar in flutter

I am trying to change the background color of the tab bar in flutter, I have tried the following ( which was accepted as an answer on this forum ) but it didnt work:
here is the code
return new MaterialApp(
theme: new ThemeData(
brightness: Brightness.light,
primaryColor: Colors.pink[800], //Changing this will change the color of the TabBar
accentColor: Colors.cyan[600],
),
EDIT :
When I change the theme data colors the background color doesnt change. Im trying to create a horizontal scrolling sub menu underneath the app bar and it was suggested I use a Tab bar.
Here is the entire dart file:
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class Index extends StatelessWidget {
//final User user;
// HomeScreen({Key key, #required this.user}) : super(key: key);
#override
Widget build(BuildContext context) {
// TODO: implement build
// String emoji = emojify(":cool:");
return new MaterialApp(
theme: new ThemeData(
brightness: Brightness.light,
primaryColor: Colors.white, //Changing this will change the color of the TabBar
accentColor: Colors.cyan[600],
),
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: new AppBar(
backgroundColor: const Color(0xFF0099a9),
title: new Image.asset('images/lb_appbar_small.png', fit: BoxFit.none,),
bottom: TabBar(
tabs: [
Tab( text: "Tab 1",),
Tab(text: "Tab 2"),
],
),
),
body: Column(children: <Widget>[
Row(
//ROW 1
children: [
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.checkSquare,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
),
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.glasses,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.moon,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed");
Text("Check Out");
}
)
),
]
),
Row(//ROW 2
children: [
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.users,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.trophy,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.calendar,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
)
]),
Row(// ROW 3
children: [
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.fileExcel,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.shoppingCart,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.list,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
),
]),
],
),
bottomNavigationBar: new BottomNavigationBar(
items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.feedback, color: const Color(0xFF0099a9),),
title: new Text("feedback")
),
new BottomNavigationBarItem(
icon: new Icon(Icons.help, color: const Color(0xFF0099a9),),
title: new Text("help")
),
new BottomNavigationBarItem(
icon: new Icon(Icons.people, color: const Color(0xFF0099a9),),
title: new Text("community",)
)
]
)
)
)
);
}
}
You have the TabBar inside your AppBar for that reason it take the same color, just move the TabBar outside the Appbar
Scaffold(
appBar: new AppBar(
backgroundColor: const Color(0xFF0099a9),
title: new Image.asset(
'images/lb_appbar_small.png',
fit: BoxFit.none,
),
),
body: Column(
children: <Widget>[
TabBar(
tabs: [
Tab(
text: "Tab 1",
),
Tab(text: "Tab 2"),
],
),
Row(
//ROW 1
....
Hi you are getting same color since you have added tabbar in appbar,If you are looking for different color for both TabBar and Appbar. Here is what you have to do.
*Add TabBar in body of Scafold.
Sample Code:
class _SwapOfferPageState extends State<SwapOfferPage> with SingleTickerProviderStateMixin{
TabController _tabController;
#override
void initState() {
_tabController = new TabController(length: 2, vsync: this);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Swap or Offer shift"),
centerTitle: true,
),
body: Column( // Column
children: <Widget>[
Container(
color: Color(0xffF5F5F5), // Tab Bar color change
child: TabBar( // TabBar
controller: _tabController,
labelColor: const Color(0xff959595),
indicatorWeight: 2,
indicatorColor: Color(0xff4961F6),
tabs: <Widget>[
Tab(
text: "SWAP MY SHIFT",
),
Tab(
text: "OFFER MY SHIFT",
),
],
),
),
Expanded(
flex: 3,
child: TabBarView( // Tab Bar View
physics: BouncingScrollPhysics(),
controller: _tabController,
children: <Widget>[
Text('Tab1'),
Text('Tab2'),
],
),
),
],
),
);
}
}
For anyone who is still looking for How to separate a TabBar from Appbar , please check the below code-
appBar: new AppBar(
title: new Text("some title"),
body: new Column(
children: [
/// this is will not colored with theme data
new TabBar(...),
Expanded(
new TabBarView(...)
)
]
)
)
You can change the Tabbar background-color, when Tabbar is inside the Material widget.
Material(
color: Colors.white, //Tabbar background-color
child: TabBar(
isScrollable: true,
labelStyle: Theme.of(context).tabBarTheme.labelStyle,
unselectedLabelStyle:
Theme.of(context).tabBarTheme.unselectedLabelStyle,
labelColor: Theme.of(context).tabBarTheme.labelColor,
unselectedLabelColor:
Theme.of(context).tabBarTheme.unselectedLabelColor,
indicatorColor: Theme.of(context).primaryColor,
tabs: [
Tab(text: 'tab 1'),
Tab(text: 'tab 2'),
Tab(text: 'tab 3'),
Tab(text: 'tab 4'),
],
),
),
Or you can even simply wrap the TabBar in a Container widget, and apply the "color" you want.

How can do card buttons fit together like Reddit App in Flutter?

I want to my card button fit together like Reddit App. How can do that?
Outside the main Row has a Container and Container' has padding height 15.0 . How can Row's widget fit that height 15.0 responsively.
Reddit card buttons
My app card buttons
This is my code;
#override
Widget build(BuildContext context) {
return new SafeArea(
top: false,
bottom: false,
child: new Card(
child: new Column(
children: <Widget>[
new Container(
padding: EdgeInsets.fromLTRB(5.0, 15.0, 5.0, 3.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
color: Colors.blueGrey,
child: new Row(
children: <Widget>[
new Icon(Icons.arrow_drop_up),
new Text('Vote'),
new Icon(Icons.arrow_drop_down),
],
),
),
new Container(
color: Colors.blueGrey,
child: new Row(
children: <Widget>[
new Icon(Icons.mode_comment),
new Text('Comment'),
],
),
),
new Container(
color: Colors.blueGrey,
child: new Row(
children: <Widget>[
new Icon(Icons.share),
new Text('Share'),
],
),
),
],
),
)
],
),
),
);
}
Hello and welcome to Flutter :)
First of all you have used too much padding i.e. 15.0 so that is why your grey boxes are smaller than that of Reddit example.
I have taken a simpler approach and designed a sample control for you. Hope you like it.
import 'package:flutter/material.dart';
void main() {
runApp(RedditButtonsExample());
}
class RedditButtonsExample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Reddit Buttons Example",
home: HomePage(),
theme: ThemeData(
primaryColor: Colors.white,
accentColor: Colors.white,
),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Reddit Buttons Example'),
),
body: Column(
children: <Widget>[
Expanded(child: Icon(Icons.insert_emoticon)),
RedditButtonsCard(), //Example widget.
],
),
);
}
}
//This is the example control that you need.
class RedditButtonsCard extends StatelessWidget {
const RedditButtonsCard({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Card(
color: Colors.black,
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FlatButton.icon(
textColor: Colors.white,
icon: Icon(
Icons.thumbs_up_down,
color: Colors.white,
),
label: Text('Vote'),
onPressed: () {},
),
FlatButton.icon(
color: Colors.white30,
textColor: Colors.white,
icon: Icon(
Icons.mode_comment,
color: Colors.white,
),
label: Text('Comment'),
onPressed: () {},
),
FlatButton.icon(
textColor: Colors.white,
icon: Icon(
Icons.share,
color: Colors.white,
),
label: Text('Share'),
onPressed: () {},
),
],
),
),
);
}
}
I used Table and TableRow and I found what I wanted. Off the topic but I want to say this; I found this solution in my dream. I said my self "you have to use DataTable or something then you got what you want." My subconscious full of with Flutter I guess. :D
#override
Widget build(BuildContext context) {
return new SafeArea(
top: false,
bottom: false,
child: new Card(
child: new Column(
children: <Widget>[
new Table(
children: [
new TableRow(
children: [
new InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.fromLTRB(5.0, 15.0, 5.0, 15.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(FontAwesomeIcons.arrowAltCircleUp, color: Colors.white),
Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: new Text('Vote', style: TextStyle(color: Colors.white)),
),
new Icon(FontAwesomeIcons.arrowAltCircleDown, color: Colors.white),
],
),
),
),
new InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.fromLTRB(5.0, 15.0, 5.0, 15.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.mode_comment, color: Colors.white),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: new Text('Comment', style: TextStyle(color: Colors.white)),
),
],
),
),
),
new InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.fromLTRB(5.0, 15.0, 5.0, 15.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.share, color: Colors.white),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: new Text('Share', style: TextStyle(color: Colors.white)),
),
],
),
),
),
],
),
],
),
],
),
),
);
}

How to use Drawer without Scaffold.drawer?

I've noticed that Drawer of Scaffold.drawer only shows up when an AppBar of Scaffold is present.
But Instead of AppBar,I Used BottomAppBar present in BottomNavigationBar.
How do I get Drawer working with BottomAppBar?
Here's my code Below for which Drawer dosen't appear
class homieclass extends State<homie>{
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
backgroundColor: Colors.white70.withOpacity(0.9),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(onPressed: (){},backgroundColor: Colors.redAccent,child: ImageIcon(new AssetImage("ast/hello123.png")),),
bottomNavigationBar: BottomAppBar(child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,mainAxisSize: MainAxisSize.max,children: <Widget>[
IconButton(icon: Icon(Icons.menu), onPressed: (){}),IconButton(icon: Icon(Icons.message), onPressed: (){}),
],
),
),
body: new Column(
children: <Widget>[new SizedBox(height: 50.0, ),
Container(margin: EdgeInsets.only(left: 0.0),child: new Text("Events",textAlign: TextAlign.left,style: TextStyle(fontFamily: 'ssfr',fontSize: 35.0,fontWeight: FontWeight.bold),),)
, Container(margin: EdgeInsets.only(left: 10.0,right: 10.0) ,width: 360.0,height: 40.0,decoration: new BoxDecoration(color: Colors.blueGrey.withOpacity(0.2),
border: new Border.all(color: Colors.blueGrey.withOpacity(0.0), width: 2.0),
borderRadius: new BorderRadius.circular(10.0),),child: new Row(children: <Widget>[SizedBox(width: 10.0,),Icon(Icons.search,color: Colors.blueGrey.withOpacity(0.9),),Text(" Search",style: TextStyle(fontFamily: 'ssft',color: Colors.blueGrey,fontSize: 20.0),)],),)
,new SizedBox(height: 10.0,),new SizedBox(
height: 5.0,
child: new Center(
child: new Container(
margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
height: 2.0
,
color: Colors.redAccent.withOpacity(0.8),
),
),
),],
),drawer: new Drawer(
child: new ListView(
children: <Widget>[ListTile(title: Text("hello"),)],
),
),
),
);
}
It works perfectly for me. Here is a working example with a dedicated "Show Drawer" button in the bottom bar (the drawer can also be dragged in from the left):
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Playground',
home: TestPage(),
);
}
}
class TestPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Body'),
),
bottomNavigationBar: Builder(builder: (BuildContext context) {
return BottomAppBar(
color: Colors.orange,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
IconButton(icon: Icon(Icons.menu), onPressed: () {
Scaffold.of(context).openDrawer();;
}),
IconButton(icon: Icon(Icons.message), onPressed: () {}),
],
),
);
},),
drawer: Drawer(
child: SafeArea(
right: false,
child: Center(
child: Text('Drawer content'),
),
),
),
);
}
}
Flutter version: Latest master build (though I'm also quite sure that it works with the beta version)
You can use Drawer, but you must supply a DrawerController, and also arrange for the drawer to overlay your other content. This is easy to do with a Stack. Its important that the stack hold a non-transparent container, otherwise you'll get rendering artifacts when the draw slides in and out. Scaffold doesn't require this, however, annoyingly, it also rebuild the other content as the draw moves (exactly the type of thing they've tried to avoid).
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutterui/util/layout_util.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) =>
MaterialApp(title: 'Flutter Playground',
home: Material(child:DrawerStack(body: body(), drawer: _drawer())));
}
Drawer _drawer() =>Drawer(
child: SafeArea(
child: Center(
child: Column(
children: [
Text('endDrawer content'),
Builder(builder:(context) => RaisedButton(
child: Text('Click', semanticsLabel: 'Click 2'),
onPressed: () {
Navigator.pop(context);
},
)),
],
),
),
),
);
Widget body() => Container(
decoration: BoxDecoration(color: Color.fromARGB(255, 255, 255, 255)),
child: SafeArea(
child: Center(
child: Column(children: [
Text('Body'), // style:TextStyle(fontSize: 14.0,color: Colors.black)),
Builder(builder:(context) => RaisedButton(
child: Text('Open drawer'),
onPressed: () {
(context.ancestorWidgetOfExactType(DrawerStack) as DrawerStack).openDrawer();
// DrawerStack.of(context).openDrawer();
})),
]))));
class DrawerStack extends StatelessWidget {
final GlobalKey<DrawerControllerState> _drawerKey =
GlobalKey<DrawerControllerState>();
final drawerScrimColor = Color.fromARGB(90, 100, 100, 128);
final double drawerEdgeDragWidth = null;
final DragStartBehavior drawerDragStartBehavior = DragStartBehavior.start;
final Widget body;
final Drawer drawer;
DrawerStack({Key key, this.body, this.drawer}) : super(key: key);
void openDrawer() {
_drawerKey.currentState?.open();
}
#override
Widget build(BuildContext context) => Stack(
children: [
// body
body,
DrawerController(
key: _drawerKey,
alignment: DrawerAlignment.end,
child: drawer,
drawerCallback: (_){},
dragStartBehavior: drawerDragStartBehavior,
//widget.drawerDragStartBehavior,
scrimColor: drawerScrimColor,
edgeDragWidth: drawerEdgeDragWidth,
),
],
);
}
You can openDrawer of global key from the flutter itself to do the job.
Scaffold.of(context).openDrawer() / Scaffold.of(context).openEndDrawer();
scaffoldKey.currentState.openDrawer(); / scaffoldKey.currentState..openEndDrawer();
Case 1
bottomNavigationBar:BottomAppBar(
elevation: 10,
shape: CircularNotchedRectangle(),
child: Container(
height: 80,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: GestureDetector(
onTap: () {
Scaffold.of(context).openDrawer();
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.dashboard),
Text(
'DASHBOARD',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.home),
Text(
'CHALLENGES',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: (){},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.public),
Text(
'Public',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.sentiment_satisfied),
Text(
'Settings',
style: TextStyle(color: Colors.black),
),
],
),
),
),
],
),
),
color: AppColors.WHITE,
);
Case 2
or you can scaffold key
class BottomBar {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
bottomNavigationBar: BottomAppBar(
elevation: 10,
shape: CircularNotchedRectangle(),
child: Container(
height: 80,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: GestureDetector(
onTap: () {
scaffoldKey.currentState.openDrawer();
// scaffoldKey.currentState.openEndDrawer(); // use to open end drawer
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.dashboard),
Text(
'DASHBOARD',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.home),
Text(
'CHALLENGES',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.public),
Text(
'Public',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.sentiment_satisfied),
Text(
'Settings',
style: TextStyle(color: Colors.black),
),
],
),
),
),
],
),
),
color: AppColors.WHITE,
));
}
}

Resources