im working on a UI app. manage to implement tabbar but got quite confused about a thin line above the tabbar. it's either a line or shadow, not sure. already run several code but doesn't manage to remove the line. the weird thing is, It seems to work the way i wanted on mobile ( chrome - mobile version / tablet ) but the line pop when opened in web version.
here is the problem ( that single line above the blue tabbar )
here is it, the same code when opened in mobile mode.
perfect clear without the line.
i try 2 version of code
DefaultTabController(
length: 2,
child: new Scaffold(
appBar: new PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: new Container(
color: Theme.of(context).primaryColor,
child: new SafeArea(
child: Column(
children: <Widget>[
new Expanded(child: new Container()),
new TabBar(
labelColor: Colors.white,
unselectedLabelColor: Colors.grey[700],
indicatorColor: Colors.white,
tabs: [
Tab(icon: Icon(Icons.chat)),
Tab(icon: Icon(Icons.filter_alt_outlined)),
],
),
],
),
),
),
),
body: TabBarView(
DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
flexibleSpace: SafeArea(
child: _tabBar,
),
backgroundColor: Theme.of(context).primaryColor,
elevation: 0,
),
body: TabBarView(
both of them works, but results are the same. that thin line above the tab bar persist. i just want to remove it. can anyone help ?
fullcode : github.com/CrazyBunnyz/Sociominer_V2/tree/error
change indicatorColor to transparent.
you have set indicator color to white.
replace that with indicatorColor: Colors.transparent,
It will work.
I solved my own question. lol. the problem lies in the header. instead of using container as the header, I just need to put the header ( container ) inside appbar first. i find it quite weird cause I don't put any decoration or style in the header. it has been solved anyway so no complain. thank you for everyone who takes their time to help me solve my problem
Related
I've got a simple custom AppBar with the following code (I've taken out some code for simplification. It's not necessary for the question.):
class SimpleAppBarPageState extends StatelessWidget implements PreferredSizeWidget {
#override
Size get preferredSize => const Size.fromHeight(100);
#override
Widget build(BuildContext context) => DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
...
bottom: TabBar(
isScrollable: true,
indicatorColor: Colors.white,
indicatorWeight: 5,
tabs: [
Tab(child: Text('1',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
),
),
),
Tab(child: Text('2',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
),
),
)
],
),
elevation: 20,
titleSpacing: 20,
),
body: TabBarView(
children: [
buildPageOne(),
buildPageTwo()
],
),
),
);
Now I have two dart files of which one contains the code for Page one and the other file contains the code for page two.
Now I want page one to be open when Tab '1' is selected and page two should be open when Tab '2' is selected.
Therefor I thought of defining a new Widget which opens the corresponding page. Here are my thoughts:
Widget buildPageOne() {
Navigator.of(context)
.push(
MaterialPageRoute(
builder: (context) => PageOne()
),
);
}
I think this last code sample is complete useless, but it kind of shows my intention what should happen.
Can you guys help me out to solve this problem?
I'd be very happy about an answer!
Greetings
First of all don't use Navigator if you are using Tabs.
Second you need a TabController to handle your Tabs e.g. you can use the DefaultTabController. With TabBar you can set the text/icon of each tab below the Appbar. Within your TabBarView you set your Widgets you want to display. In your case omit the Navigator and just provide the Widgets you want to display in TabBarView
DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: 'Tabs',
bottom: TabBar(
tabs:[
Tab(icon: Icon(Icons.home)),
Tab(icon: Icon(Icons.settings)),
],
),
),
body: TabBarView(
children: [
Widget1(),
Widget2()
]
),
),
);
Don't use methods to navigator to new screen.
Create 2 separate stateless or statefull widgets: Widget1(), Widget2(),
And in childrens of TabBarView use these 2 widgets as children.
body: TabBarView(
children: [
Widget1(),
Widget2(),
],
),
Save them, do a hot restart
I am having a problem putting both an app bar and bottom app bar in flutter.
I create a Scaffold and use the app bar and bottomNavigationBar properties. I use AppBar and BottomAppBar respectively. But when I run it only the bottom app bar will show and not the top app bar. What am I doing wrong? Is it even possible to have both a bottom app bar and top app bar?
It should work, maybe the child of the BottomAppBar has no height, here a working example:
return Scaffold(
appBar: AppBar(
title: Text('Title'),
),
body: Center(child: Text('Center')),
bottomNavigationBar: BottomAppBar(
color: Colors.red,
child: Container(
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.home),
Icon(Icons.pause_circle_filled),
Icon(Icons.settings)
],
),
),
),
);
I need to set the navigation bar to transparent, but not hidden. As in the example of Youtube Music on the left.
I tried it in several ways, whenever I define it as transparent the bar is white.
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
systemNavigationBarColor: Colors.transparent,
systemNavigationBarDividerColor: Colors.transparent,
));
Please see the image on the right. I just need the white part to be transparent, the gesture indicator needs to remain visible.
Can someone help me?
I didn't try but I think this should work
Container(
color: Colors.black,
child: SafeArea(
child: YourWidget(),
)
)
I think you can achieve that without using SystemChrome class. One way to do it is wrap BottomNavigationBar with Theme widget and use it's canvasColor property and assignColors.transparent to it, as below:
bottomNavigationBar: Theme(
data: Theme.of(context)
.copyWith(canvasColor: Colors.transparent),
child: BottomNavigationBar(
currentIndex: 0,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home'))
],
),
),
Above will result in something like this:
In order to remove the shadow effect, use elevation property and pass 0 to it, that results in transparent navigation bar, as below:
This way if you change your scaffold's background color, the nav bar will be shown in transparent color.
Hope this answers your question
Put your navigation bar in a container.Then give no color to container it will automatically set color to transparent.To align Container to bottom you can do this.Hope this will work.
flutter
Align(
alignment: Alignment.bottomLeft,
child: Container(
width: MediaQuery.of(context).size.width,
height: 50.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
],
),
),
)
Your solution is not enough alone. You should use below way also:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge,
overlays: [SystemUiOverlay.top]);
How can I replace the AppBar title with image logo in Flutter?
The title property takes a Widget, so you can pass any widget to it.
For example, an image added to assets
Scaffold(
appBar: AppBar(
title: Image.asset('assets/title.png', fit: BoxFit.cover),
),
body: ...
)
More info
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/logo.png',
fit: BoxFit.contain,
height: 32,
),
Container(
padding: const EdgeInsets.all(8.0), child: Text('YourAppTitle'))
],
),
)
App themes are probably best long term. (Make sure you've properly added the logo image to your assets folder and updated 'pubspec.yaml' file too).
Create a folder (e.g. 'themes') in your /lib path.
Create a "style" file (e.g. 'style.dart') in that folder. (Use this file also to implement different themes for your app: colors, fonts, etc.)
Create an image widget in your 'style' file, e.g. (height, weight, path, alignment up to you):
Image appLogo = new Image(
image: new ExactAssetImage("assets/images/AppLogo.png"),
height: 28.0,
width: 20.0,
alignment: FractionalOffset.center);
In the title field of your AppBar, add 'appLogo' (or whatever you
named the widget), like this (don't forget to import your 'style' file):
child: Scaffold(
appBar: AppBar(
title: appLogo,
),
Now, if ever you need to change this logo, you simply need to edit your style.dart file with the new image path and that's it. And if you have different themes and name your widgets the same way in each style file, you'll also be able to rapidly implement different styles (e.g. 'style1', 'style2', etc.) on the fly just by importing the respective file in just a couple places.
The problem is that the AppBar does not fit it Height with the image size. To solve this problem, i've set the image and the AppBar Height (including the padding)
Here's my code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Image.asset(
"assets/images/logo_light.png",
fit: BoxFit.contain,
height: 72,
),
toolbarHeight: 88,
actions: [
IconButton(onPressed: () => {}, icon: Icon(Icons.search)),
],
),
);
AppBar(
centerTitle: true,
title: Image.asset('assets/your_logo.png', height: 32),
backgroundColor: Theme.of(context).primaryColor,
)
the above didn't quite work for me, this adds the picture background I want to the entire app bar and leaves the option to keep a title. updated for flutter/dart 2.0 null safety
Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text('App Bar!'),
flexibleSpace: Image(
image: AssetImage('images/bar1.jpg'),
fit: BoxFit.cover,
),
backgroundColor: Colors.transparent,
),
body: Container()
)
I have a bottomNavigation Bar with a TabBarview as below:
#override
Widget build(BuildContext context) {
return new Scaffold(
//drawer: _drawer,
appBar: new AppBar(automaticallyImplyLeading: false,
title: new Text(_choice.title), actions: getAppBarActions(context)),
bottomNavigationBar: new Material(
color: CupertinoColors.lightBackgroundGray,
//color: c,
child: new Container(
height: 50.0,
child: new TabBar(
controller: controller,
//labelColor: Colors.grey,
tabs: mytablist,
labelStyle: new TextStyle(fontSize: 10.0),
labelColor: CupertinoColors.activeBlue,
unselectedLabelColor: CupertinoColors.inactiveGray,
isScrollable: true,
indicatorWeight: 1.0,
indicatorColor: CupertinoColors.activeBlue,
//indicatorPadding: new EdgeInsets.only(bottom: 5.0),
),
)),
body: new TabBarView(
controller: controller,
children: _tabWidgets(),
),
);
}
I have of courses pages that are navigated to, I also navigate to pages off the tabbarview that do not have the bottomnavigation, however I want to be able to navigate to one of the pages within the bottomnav, but when I do using something like this:
Navigator.of(context)..pushReplacementNamed(Chat.ChatServerPage.routeName);
It goes to the page but without the appbar or the bottomnavigationbar, anyone know how to accomplish this? I have tried all that I could find. Any help would be appreciated.
Check your widgets hierarchy. Usually MaterialApp widget is top level and it contains Navigator widget. That's why "navigation" replaces entire screen.
You could use different ways to implement this:
Each page has it's own Scaffold with AppBar and NavBar. Related question
It's possible to have multiple navigators. And separate Navigator could be added in Scaffold body. Related question