Add a main drawer to a button in flutter - flutter

I am new to flutter and I need to add the main drawer of the app to a button as you can see in the below picture(This is the upper section of the UI of the app)
Any ideas of having the main drawer apply to a button instead of having it normally assign it to the app bar. (This mobile app doesn't have an app bar)
#override
Widget build(BuildContext context) {
var mediaQuery = MediaQuery.of(context);
return Scaffold(
key: scaffoldKey,
body: Stack(
children: <Widget>[
_buildWidgetAlbumCover(mediaQuery),
getMainContentWidget(mediaQuery),
_buildWidgetMenu(mediaQuery),
_buildWidgetFloatingActionButton(mediaQuery),
Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Item 1'),
onTap: () {
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
},
),
],
),
),
],
),
);
}
Widget _buildWidgetMenu(MediaQueryData mediaQuery) {
return Padding(
padding: EdgeInsets.only(
left: 2.0,
top: mediaQuery.padding.top + 2.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(
Icons.menu,
color: Colors.white,
size: 25,
),
padding: EdgeInsets.all(2.0),
// onPressed: () => scaffoldKey.currentState.openDrawer(),
),
],
),
);
}
enter image description here
This is output which I get after having this code. This drawer can't even change or as it is fixed one. I want the normal drawer which is also attached to the _buildWidgetMenu instead of the app bar drawer.

If youre using a sacffold it has a drawer property that you can make use of eg cookbook
return Scaffold(
appBar: AppBar(title: Text(title)),
body: Center(child: Text('My Page!')),
drawer: Drawer(...
opening your drawer from button clicks
var scaffoldKey = GlobalKey<ScaffoldState>();
//required key
Scaffold(
key: scaffoldKey,
drawer: new Drawer(
child: new ListView(
padding: EdgeInsets.zero,...
body:Center(..
IconButton(
icon: Icon(Icons.menu),
//open drawer
onPressed: () => scaffoldKey.currentState.openDrawer(),
),

Related

Flutter - Overlay drawer icon over WebView

I want to show the drawer icon in front of the WebView page with no AppBar.
Here is my Implementation so far:
Scaffold(
body: const SafeArea(
child: WebView(
initialUrl: "https://sohozeto.com/",
javascriptMode: JavascriptMode.unrestricted)),
drawer: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.transparent,
),
child: Text('Drawer Header'),
),
ListTile(
title: const Text('Item 1'),
onTap: () {},
),
ListTile(
title: const Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
],
),
),
);
for the overlay, use a Stack
const SafeArea(
child:
Stack(children: [
..., // Webview, etc.
Icon(your_icon),
])

flutter opening a drawer using a button inside a scaffold body

What I have
A custom button with onpress to open a drawer, my build snippet : (inside MyClassState)
Widget build(BuildContext context) => Scaffold(
key: _key,
body: Container(
child: Column(
children: [
Row(children: [
ElevatedButton(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Icon(
Icons.settings,
size: 38,
color: Colors.white,
),
),
onPressed: () => _key.currentState?.openEndDrawer(),
),
]),]),))
method globalkey _key is used (after reading some solution here)
Class MyClassState extends State<MyClass> {
GlobalKey<ScaffoldState> _key = GlobalKey();
...
}
What I expected
The drawer opens on press/tap
The current behaviour result
Nothing happens on tap, but I can open the drawer using slide gesture.
What did I do wrong in this case?
You didn't declared endDrawer in scaffold, Here is the your updated code
Widget build(BuildContext context) => Scaffold(
key: _key,
endDrawer: Drawer( /// this is missing in your code
child: Container(
width: 200,
color: Colors.red,
),
),
body: Container(
child: Column(
children: [
Row(children: [
ElevatedButton(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Icon(
Icons.settings,
size: 38,
color: Colors.white,
),
),
onPressed: () => _key.currentState?.openEndDrawer(),
),
]),]),))

how you can remove the padding between the icon for the drawer in the appBar and the Search Icon in flutter

i make appBar and add a drawer to it and also search icon the problem there is padding between the icon for the Drawer and the search icon And I can't get rid of it
this the code:
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
titleSpacing: 0,
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
],
),
backgroundColor: Color(0xffffffff),
elevation: 1,
toolbarHeight: 40.0,
iconTheme: IconThemeData(color: Colors.grey),
),
drawer: Drawer(
child: ListView(
children: <Widget>[],
),
),
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Color(0xfffafafa),
child: Text("hello"),
),
);
}
}
Add this lines to remove default padding of IconButton:
IconButton(
constraints: BoxConstraints(),
padding: const EdgeInsets.all(0),),
Wrapping your search button with this will reduce the padding.
Not sure how much of the padding you wanted to remove.
SizedBox(
width: 10.0,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.search),
onPressed: () {},
),
),
Try like this
appBar: AppBar(
title: Text(title),
backgroundColor: kPrimaryLightColor,
actions: <Widget>[
Padding(
padding: EdgeInsets.only(right: 20.0),
child: GestureDetector(
onTap: () {},
child: Icon(
Icons.message_rounded,
size: 30.0,
),
)),
Solution 1
Just add a property called "titleSpacing" in your AppBar Tag,
Sample
appBar: AppBar(
titleSpacing: 0, //Add this line to your code
title: Text(widget.title),
leading: Icon(Icons.android),
),
Solution 2
Or wrap your title with "Transform.translate" and Add property "offset".
sample
title: Transform.translate(
offset: Offset(-30.0, 0.0),
child: Text('your app title')
),

Bottom Widget overflow in Column layout?

I'm trying to display an ad using the admob_flutter package: https://pub.dev/packages/admob_flutter, which basically allows me to display the ad just like any other widget.
Following the documentation, I added a widget within a column layout as below (relevant code only):
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text(fileName),
backgroundColor: Colors.teal,
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: (){
},
),
],
),
body: Container(
padding: EdgeInsets.all(5.0),
child: Column(
children: <Widget>[
TextField(
...
),
AdmobBanner(
adUnitId: 'ca-app-pub-39402560999XXXXXX/XXXXXXXXX',
adSize: AdmobBannerSize.BANNER,
),
],
),
),
bottomNavigationBar: BottomAppBar(...)
As per documentation, this is all I have to do, but I get an overflow error as seen in screenshot below:
I tried wrapping these in Expanded() and Flexible() but that did not fix my problem?
What am I doing wrong here?
You should wrap your Widgets in a Scrollable Widget so they can be scrolled when the contents exceeds the device screen's size.
I wrapped your widgets in a SingleChildScrollView, check the demo below:
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text(fileName),
backgroundColor: Colors.teal,
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: (){
},
),
],
),
body: SingleChildScrollView( // new line
child: Container(
padding: EdgeInsets.all(5.0),
child: Column(
children: <Widget>[
TextField(
...
),
AdmobBanner(
adUnitId: 'ca-app-pub-39402560999XXXXXX/XXXXXXXXX',
adSize: AdmobBannerSize.BANNER,
),
],
),
),
)
bottomNavigationBar: BottomAppBar(...)
Just change Column to Listview
You can use ListView , SingleChildScrollView or ListView.builder if you want dynamic contents in place of Column
body: Container(
padding: EdgeInsets.all(5.0),
child: Column(..),),

How to make some icons at Appbar with different alignment?

I faced some problem. I want make an image, a text and two icons in AppBar but I can't make it work as I want.
I tried to make some fonts in a row after the images and text. The images and the text successful show in my AppBar, but the rest of 2 fonts (Trolley and notifications) show some error.
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.amber,
appBar: new AppBar
(
title: new Row
(
mainAxisAlignment: MainAxisAlignment.start,
children:
[
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,),
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop'))
],
)
),
....
Use leading to set a widget before appBar title & use actions to specify list of widgets in appBar which appears on right side of appBar title.
AppBar(
leading: Image.asset('yourImage'), // you can put Icon as well, it accepts any widget.
title: Text ("Your Title"),
actions: [
Icon(Icons.add),
Icon(Icons.add),
],
);
Read more about it here
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Solid Shop"),
leading: Image.asset("your_image_asset"),
actions: <Widget>[
IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
IconButton(icon: Icon(Icons.message), onPressed: () {}),
],
),
);
}
You need to use actions instead of title
actions: <Widget>[
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,),
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')),
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,), // here add notification icon
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')) // here add other icon
],
You can add icon and also a picture on app bar, this code works for me:-
appBar: AppBar(
centerTitle: true,
elevation: 2,
title: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/images/bell.png",
fit: BoxFit.contain,
height: 28,
),
Container(
child: Text(" APP BAR"),
)
],
),
),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return Settings();
},
),
);
},
color: Colors.white,
)
],
),
Hope this was helpful.
You can combine it with Spacers :
actions: const [
Spacer(flex: 3),
Icon(Icons.fit_screen),
Spacer(flex: 10),
Icon(Icons.width_normal),
Spacer(flex: 1),
Icon(Icons.aspect_ratio),
Spacer(flex: 1),
Icon(Icons.ad_units),
Spacer(flex: 5),
],