Inspired by Samsung's new One UI, I wanted to implement something similar using SliverAppBar in Flutter. But I am unable to figure out...
As per One UI implementation, The SliverAppBar title should appear right in the center (both vertically and horizontally) of the expanded App Bar. At the same time, it should stick to the left when collapsed.
NOTE: In my case, the App Bar contains Background Image also... So, trying to wrap the FlexibleSpaceBar with Column widget seems to make the background look weird.
I also want to get rid of extra padding on the left (which is available by default even when no "leading" widget is placed) when collapsed. Also, it would be better if the actions appear at the bottom of the SliverAppBar when expanded, so that users can reach them one-handedly...
One UI:
Left ⇒ Expanded: Right ⇒ Collapsed:
- Actions on bottom - Actions as usual
- title is centered - title is on the left
(no unwanted padding on the left of title)
I've created the One Ui Scroll View.
You can also add actions, and customize any others.
NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: Palette.primaryBackgroundColor,
expandedHeight: 180.0,
pinned: true,
elevation: 0,
centerTitle: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Attachments", style: Styles.appBarTitle),
),
));
You can use this to get the ONE UI look that you want.
The height can be changed on the expandedHeight.
Related
In my Project i have 4 screens.
Home - Help Center - Search - Profile.
In Home page: My AppBar has leading and action buttons without title and transparent.
In Help Center My AppBar has leading doesnt have action buttons has a title and its a custom appbar.
In Search Screen : Using same appbar as help center screen but has action buttons and leading.
My Question is: As you can understand in my app i using few diffrent appbars. So how can i connect that bottomNavigationBar dynamicly ? Appbars isn't same thats why i cant use bottomNavigationBar for now.
So what can i do about it ? How can i make it dynamic ? Thanks for all responses!
What do you mean by connecting bottomNavigationBar?
I did not understand what your problem is completely, but if you want that bottom nav bar is common for your all pages you can use this approach:
//class variable
final _screens = [
const Page1(),
const Page2(),
const Page3(),
];
//your start page
return Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
children: [
_screens[_currentIndex],
//some code
],
),
);
And you can change _currentIndex by tapping your nav bar items. For more help you can share some code parts of your app and explanation.
I want to prevent my end drawer to be closed after clicking outside of it, I open my endDrawer with this line scaffoldKey.currentState.openEndDrawer so when I accidentally click outside of this drawer where you see gray drawerScrimColor it gets closed automatically as per its natural behavior, I do not want to do that what I see is only endDrawerEnableOpenDragGesture: false but this prevents my drawer not to be opened with DragGesture but my problem is different I do not want my drawer be closed automatically upon clicking outside of it please help me out your help will be appreciated thanks a lot in advance
I faced the exact same scenario in my app in which I wanted to disable the drawer closing when the outer translucent scrim is clicked.
This is the solution I used (still use):
return Scaffold(
...,
drawer: Container(
color: Colors.transparent,
child:
Row(children: const [SizedBox(width: 304, child: DrawerMenu())])),
...
);
The color of the Container has to be set to something, else it won't work. It is set to transparent as the Scaffold's default translucent scrimColor is enough.
The width is set to 304 as this is the default width of the Drawer as mentioned here.
The Row used here, is not over-engineering, it is used to prevent the child widget expanding to the screen width which is the default behavior of Scaffold's Drawer.
I use this instead of other solutions based on overriding the Gestures as it's simple and it doesn't affect Scrolling in/Dragging the Drawer.
I am using Persistent Bottom Nav Bar package and I want to Navigate to a desired page using a button on the AppBar, however the NavBar disappears if I do it like this. I understand this may be because they are apart of the same class (Working with the example project from Persistent Nav Bar git hub).
I have tried different ways of routing without luck.
How can I work around this so the drawer and the AppBar buttons would keep the Nav Bar?
You could try something like this:
Scaffold( appBar: AppBar(), body: PersistentTabView() );
solution from - https://github.com/BilalShahid13/PersistentBottomNavBar/issues/171
I have been trying to make the flutter bottom navigation bar widget to condense the gap between icons.
How would I be able to do this. I am imagining that I would need to create my own bottom navigation bar but if there is a simpler solution then I am all ears.
Thank you.
Okay seems like I was being silly.
You can add padding to a specific side to get it moving like so:
BottomNavigationBarItem(
icon: Container(
child: Icon(Icons.explore),
padding: EdgeInsets.fromLTRB(100, 0, 0, 0),
),
title: Text("Explore"),
),
I want to change the panel color (i dont know what is it called, check the photo) without changing the primaryColor in ThemeData.
I am using flutter for this project. Can this be done in flutter itself or should i need to do it in android code.
That panel is generally called the AppBar.
You can change its color by assigning an appBar backgroundColor when you return the Scaffold of your Screen class.
Here is a quick sample :
appBar: AppBar(
backgroundColor: Colors.green
)
Here is a link to the Scaffold class
Please go through the properties provided by the AppBar class as well.