I want to make something like this, but always get this:
Scaffold(
drawer: Drawer(..),
..
)
How do I create a Drawer that is not displayed in the status bar?
For this kind of scenario, Flutter has the SafeArea widget. This widget will make sure that nothing is rendered e.g. beneath the status bar, i.e. a padding is added.
To apply this to your Drawer, you can simply wrap your Drawer with a SafeArea:
Scaffold(
drawer: SafeArea(
child: Drawer(..),
),
..
)
Screenshot of the drawer
You can also specify if you want to remove some of the padding added by SafeArea using the optional parameters top, bottom, left & right, e.g. SafeArea(bottom: false, ..).
Adding the padding: const EdgeInsets.all(0.0), to ListView resolves the issue.
Related
i am new to flutter and i would like to have a shared appBar and bottomNavigationBar
the way i am currently using is implementing them in spearte files and importing them in each screen but i need to make one screen contains the appbar and the bottomNavigationBar and the content of the body renders diffrent views according to the routes and i can't make it at main page because the main page renders welcome screen
in reactJS i was importing the header and footer and make my routes between them how can i make somthing similar in flutter
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: navBar(),
body: SingleChildScrollView(reverse: true, child: ScanPassport()),
bottomNavigationBar: bottomNavigation(),
currentIndex: _selectedIndex,
onTap: _onItemTapped,
showSelectedLabels: false,
showUnselectedLabels: false,
type: BottomNavigationBarType.fixed,
),
);
}
}
A couple of options:
Use MaterialApp() router. There's a tutorial here showing how to refactor your Scaffold() so you don't have duplicate code for appBar, bottomNavigationBar, etc. This is the official Flutter method for view routing.
If you need to swap out your Scaffold() body but can't change your other Scaffold() elements, you can create a widget for the body that takes a "page" value and change what it returns from build() based on the "page" value passed. The widget holding your Scaffold can be stateful and your bottom navigation bar can setState() the page number.
In your context, You can just have a single scaffold homepage screen after logged in success or after welcome screen (depends up app). Once you navigate to homepage, You will have appBar and bottom navigation bar at top and bottom respectively. The remaining portion at center will be your body content of the selected tab. Once you switched the tap on bottom navigation, you should change the content rather than using routes for switching the body content. The current page status will be preserved on homepage.
I am developing an app in flutter with few screen I want to add AppBar in home screen and want that appbar to be fixed in all screen, but in the dummy code which i have written the complete screen is getting replaced by that.
Below is the screen
HomeScreen - here i have created appbar
When I click on AddPolicy Button, i get that screen where right now i just have a text but the complete screen gets replaced as below, but I want the header appBar should be fixed. How can I achieve this.
Below is the code
homepage - https://github.com/lodha13/samkit/blob/main/lib/screens/home.dart
AddPolicy page - https://github.com/lodha13/samkit/blob/main/lib/screens/add_policy.dart
You have two opptions:
have a global widget for appbar and use it on each different page,
or
You can have one Scaffold in your main.dart and instead of generating a new one for each page, only change the body parameter using setState. for example:
// have as many widget as you want for each page
const body1 = Text("body1"); //just a simple example, you can change it to whatever you want.
const body2 = Text("body2");
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: handleBody(selectedIndex)
);
then you can have a function to handle bodies:
handleBody(int index){ // you can pass different input for body selection I have used an int for simplicity
if(index == 1){return body1;}
if(index ==2) {return body2;}
// and so on
}
now with changing the selectedIndex you can show different bodies. Personally, I prefer to have a list of widgets and select one of them based on selectedIndex.
I have struggled to find a method to fit the height of the AppBar based on action icon sizes and their padding. When padding is provided to leading and action icons, they are covered from the AppBar. Is there any kind of a method to achieve this feature?This is how it should work
You can try setting the app bar height based on the device height
appBar: PreferredSize(
preferredSize: Size.fromHeight(MediaQuery.of(context).size.height * 0.2), // here the desired height
child: AppBar(
// ...
)
),
I'm trying to place a Navigator as child of a ListView widget. I'm doing this in order to have some static top content (i.e. a top navbar with a navigation options) and below that, some dynamic content based on the routing of the Navigator. I want to use a ListView instead of a Column in order to be able to scroll all the content, including the top navigation bar.
However, I'm getting a render exception, as the content of the Navigator widget is not bounded, and therefore can not be places inside a ListView, as it doesn't have any size constraints.
Is there any workaround in order to achieve such an effect?
|------------------| ^
| STATIC NAVBAR | | SCROLL
|------------------| |
| | ^
| NAVIGATOR |
| CONTENT |
| |
|------------------|
First off a SingleChildScrollView would probably suit your needs better to scroll a single widget.
To solve your render exception you should put you ListView or SingleChildScrollView as a child of Navigator as your intended effect is to scroll the contents of each routed widget. This isn't the only way to do it, I just think it would be easier for you to manage constraints for each child route. Either way, you're going to need to bound the children of your Navigator at some point in the vertical direction.
You can use TabBar so you can achieve the navigation that you meant in your question. You can put the TabBar inside the bottom property of Scaffold - AppBar().
For documentation you can check this official documentation of how to work with tabs here
Example of my work :
return Scaffold(
appBar: AppBar(
title: AppBarTitle(),
bottom: TabBar(
controller: _tabController, // define your TabController
tabs: _tabs, //list of tab widgets
),
),
body: TabBarView(
controller: _tabController,
children: <Widget>[
// Here you can put your ListView widget as your dynamic contents
],
),
);
I've seem examples on how to set up a drawer in Flutter (return new Scaffold(drawer: new Drawer( ... ) or return new Scaffold(endDrawer: new Drawer( ... )).
How can I remove the hamburger button at the top (so that you can only get the drawer through sliding from the side (or through a custom button in the app - that I know how to do))?
In AppBar you need to do the following to hide default rendering hamburger icon
AppBar(
automaticallyImplyLeading: false, // this will hide Drawer hamburger icon
actions: <Widget>[Container()], // this will hide endDrawer hamburger icon
... // other props
),
and In SilverAppBar do the following to hide default rendering hamburger icon
SilverAppBar(
automaticallyImplyLeading: false, // this will hide Drawer hamburger icon
actions: <Widget>[Container()], // this will hide endDrawer hamburger icon
... // other props
}
I hope this will help...
Just set the leading property in your AppBar to an empty Container
appBar: new AppBar(
leading: new Container(),
....
And in order to remove endDrawer (for RtL). It is placed where the action property is, so also just add an empty Container as a single child of the action property
appBar: new AppBar(
actions: <Widget>[
new Container(),
],
.....
Use the https://docs.flutter.io/flutter/material/AppBar/automaticallyImplyLeading.html property on the AppBar
For the normal drawer you should set https://docs.flutter.io/flutter/material/AppBar/automaticallyImplyLeading.html to false.
For the end drawer you should do the following:
actions: [Container()]
Simply add this to your Appbar automaticallyImplyLeading: false,
If you have stacked the AppBar() widget over the top of the SliverAppBar() you need to do automaticallyImplyLeading: false in SliverAppBar() widget only.
This will remove the Hamburger icon from the AppBar.
By the way, why it is happening as such? Could someone tell me?
Am not getting it....