I have a BottomNavigationBar which I need to add only one centralized button inside, but I am getting this error:
'package:flutter/src/material/bottom_navigation_bar.dart': Failed assertion: line 191 pos 15: 'items.length >= 2': is not true.
which is logical as the flutter's source code has this condition:
//..
assert(items.length >= 2),
So, here's my code, is there a workaround for this using BottomNavigationBar to keep the code clean?
BottomNavigationBar(
items: <BottomNavigationBarItem>[
buildBottomNavigationBarItem(
iconData: Icons.close,
),
// AN ERROR AFTER COMMENTING THIS:
// buildBottomNavigationBarItem(
// iconData: Icons.open,
// ),
],
),
BottomNavigationBarItem buildBottomNavigationBarItem(
{IconData iconData, String title = ''}
) {
return BottomNavigationBarItem(
icon: Icon(
iconData,
color: Theme.of(context).accentColor,
size: 0.04 * _deviceHeight,
),
title: Text(
title,
),
);
}
thanks
You can't use BottomNavigationBar but instead of it you can create your own widget and pass it into the bottomNavigationBar parameter.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
body: SafeArea(
child: Text('Hi'),
),
bottomNavigationBar: Container(
height: 60,
color: Colors.black12,
child: InkWell(
onTap: () => print('tap on close'),
child: Padding(
padding: EdgeInsets.only(top: 8.0),
child: Column(
children: <Widget>[
Icon(
Icons.close,
color: Theme.of(context).accentColor,
),
Text('close'),
],
),
),
),
),
),
);
}
}
If the new, custom bottom navigation bar overlaps with the phone's OS GUI, you can wrap the InkWell with a SafeArea widget.
You can change the assert(items.length >= 2), to the length you want in the bottom navigation bar if you want to have three items turn the assert(items.length >= 2), to assert(items.length >= 3),
Related
I'm trying to find a way to place an AdMob ad at the top of my widget tree. The best way I thought of doing this was to try to place it in the flexible space inside the appbar. The spacing isn't quite how I want it as the ad is appearing behind the title, leading, and trailing widgets on the appbar. Is there any way to move the ad up so it's not placed behind the content of the appbar? If not, is there a way I can place the ad outside the appbar and have it appear above a scaffold (tried wrapping the scaffold in the column to achieve this and didn't work)?
Image of appbar:
AppBar returnAppBarForHomePagesTest(
BuildContext context,
String page_header,
localUser local_user,
Function updateUserState,
bool using_default_image,
String profile_pic,
GlobalKey<ScaffoldState> scaffold_key,
BannerAd ad,
bool ad_loaded) {
return AppBar(
toolbarHeight: 100,
flexibleSpace: ad_loaded /// TRYING TO PLACE AD HERE
? Container(
child: AdWidget(
ad: ad,
),
width: ad.size.width.toDouble(),
alignment: Alignment.center,
)
: const CircularProgressIndicator(),
elevation: 0,
backgroundColor: HEADER_FOOTER_BACKGROUND_COLOR,
centerTitle: true,
title: Text(page_header,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: PRIMARY_PAGE_HEADER_SIZE,
color: Colors.white,
)),
leadingWidth: 35,
automaticallyImplyLeading: false,
leading: Transform.translate(
offset: const Offset(8, 0),
child: GestureDetector(
onTap: () {
globals.GlobalVars()
.navigatorKey
.currentState
?.pushNamed(EditProfile.route_name, arguments: local_user)
.then((value) {
if (value != null) {
updateUserState(value);
}
});
},
child: CircleAvatar(
backgroundImage: using_default_image
? AssetImage(profile_pic) as ImageProvider
: NetworkImage(profile_pic),
radius: 5,
),
),
),
actions: [
IconButton(
icon: const Icon(
Icons.settings_outlined,
color: Colors.white,
size: 35,
),
onPressed: () {
scaffold_key.currentState?.openDrawer(); // do something
},
)
],
);
}
The easiest way would be to wrap your Scaffold in a Stack
return Stack(
children: [
Scaffold(
appBar: AppBar(
...
),
body: ...
),
if (showAd)
//Your ad here
Container(
height: kToolbarHeight,
width: MediaQuery.of(context).size.width,
child : ...
),
],
);
Here is a working gist you can try
There are five navigation items in total and the widths are 154,153,154,153,154. I know it's kind of strange but the UI design is like this. As for this I guess I cannot use any Widget about navigator in the flutter lib.
Each item contains an icon and a text as usual but the distance between the two should be set exactly. I don't know if it can be set in flutter widget bottomNavigatorBar.
Commonly, the color of the icon, text and the background will change when selected.
What I have done: I created a widget and add it to the bottom of every pages. As you can imagine, when jumping to a new page, the navigation bar will re-render. That is not the same as we use in our mobile phones.
I have found some articles and blogs, but still can't solve my problem. Is there any reference?
You can use the below code and redirect this page into main.dart and can use test and icon also.
class nav extends StatefulWidget {
#override
_navState createState() => _navState();
}
class _navState extends State<nav> {
int tabIndex = 0;
List<Widget> listScreens;
#override
void initState() {
ScreenUtil.init(width: 375, height: 812);
super.initState();
listScreens = [
Home(),
Treatments(),
Request(),
Appointments(),
Menu(),
];
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: listScreens[tabIndex],
bottomNavigationBar: new Theme(
data: Theme.of(context).copyWith(
canvasColor: Color(0xFF320151),
primaryColor: Color(0xFF320151)),
child: BottomNavigationBar(
backgroundColor: Color(0xFF38095c),
selectedItemColor: Color(0xFFe34fd1),
unselectedItemColor: Color(0xFF510382),
currentIndex: tabIndex,
onTap: (int index) {
setState(() {
tabIndex = index;
});
},
items: [
BottomNavigationBarItem(
title: Text(""),
icon: Container(
width: 154, child: Center(child: Icon(AntDesign.home))),
),
BottomNavigationBarItem(
title: Text(""),
icon: Container(
width: 153,
child: Center(
child: Icon(MaterialCommunityIcons.medical_bag))),
),
BottomNavigationBarItem(
title: Text(""),
icon: Container(
width: 154,
child: Center(child: Icon(Fontisto.share_a))),
),
BottomNavigationBarItem(
title: Text(""),
icon: Container(
width: 153,
child: Center(child: Icon(AntDesign.calendar))),
),
BottomNavigationBarItem(
title: Text(""),
icon: Container(
width: 154,
child: Center(child: Icon(Ionicons.ios_person))),
),
]),
)),
);
}
}
I am using Cards in Flutter and want Progress Indicator at the left bottom position for 2 seconds while Tap on the card so that another page load successfully.
Does anyone know how to add?
Container(
height: 130,
child: Card(
child: Row(
children: <Widget>[
Expanded(
child: ListTile(
title: Text(
'My card Location',
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w700),
),
leading: Icon(Icons.setting),
// color: Colors.blueAccent, size: mediumIconSize),
trailing: Icon(Icons.keyboard_arrow_right),
selected: true,
onTap: () async {
// I try this one but not working
// Flushbar(
//
// showProgressIndicator: true,
// duration: Duration(seconds: 2),
// );
getDetails().then((myCardlocations) {
Navigator
.of(context)
.pushNamed('/myCardlocations',
arguments: ObjectLocations(locations, 'myCardlocations'));
}
);
}
),
),
],
),
),
),
You can do something like this using Stack and CircularProgressIndicator..
class _MyWidgetState extends State<MyWidget> {
bool isLoading = false;
#override
Widget build(BuildContext context) {
return Container(
height: 130,
child: Stack(
children: [
Container(
height: 130,
child: Card(
child: Row(
children: <Widget>[
Expanded(
child: ListTile(
title: Text(
'My card Location',
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w700),
),
leading: Icon(Icons.settings),
// color: Colors.blueAccent, size: mediumIconSize),
trailing: Icon(Icons.keyboard_arrow_right),
selected: true,
onTap: () async {
setState(() {
isLoading = true;
});
getDetails().then((myCardLocations) {
setState(() {
isLoading = false;
});
// navigation code here
});
},
),
),
],
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: isLoading
? Padding(
padding: EdgeInsets.fromLTRB(15,0,0,15),
child: SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(),
),
)
: SizedBox(),
),
],
),
);
}
}
Edit:
Looks like I misunderstood the question a bit. Specifically, the place where to show the progress indicator. Anyways, if you get the idea, you can put the indicator at a different place as per your requirement.
There are certain things, which I would like to mention before I give the actual answer.
Read about Flutter.delayed constructor, very useful thing to make some thing wait for a while and do the operation by providing Duration. Whatever you want to do after that duration, it will implement in the callback function
Future.delayed(Duration(seconds: your_time, (){
//it will perform this operation after that much of seconds
}));
You can always show/hide a Widget using bool value, and make changes accordingly
Use a column and Add the LinearProgressIndicator at the end of the Widget. Show/hide it based up on the data
Also, use MediaQuery to give out the height. It is more efficient way of giving the dimensions according to all phone size. Like match-parent in Android Studio. Do the math accordingly, I have shown in the code also
Column(
children: [
Row(),
bool val ? LinearProgressIndicator() : Container() // Container() is nothing but an empty widget which shows nothing
]
)
Some heads up: I have not used getData, since it is not defined properly but you can call it the in function which I will show you in the code, that is pageTransit(). Follow the comments and you are good to go
class _MyHomePageState extends State<MyHomePage> {
// this takes care of the show/hide of your progress indicator
bool _showProgress = false;
// this takes care of the operation
void pageTransit(){
// first show when the ListTile is clicked
setState(() => _showProgress = true);
Future.delayed(Duration(seconds: 2), (){
// hide it after 2 seconds
setState(() => _showProgress = false);
// do the page trnasition here
//getDetails().then((myCardlocations) {
//Navigator.of(context).pushNamed('/myCardlocations',
//arguments: ObjectLocations(locations, 'myCardlocations'));
//}
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
height: MediaQuery.of(context).size.height * 0.1,
child: Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// use your items here, based upon the bool value show hide your
// progress indicator
Row(
children: <Widget>[
Expanded(
child: ListTile(
title: Text(
'My card Location',
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w700),
),
leading: Icon(Icons.settings),
// color: Colors.blueAccent, size: mediumIconSize),
trailing: Icon(Icons.keyboard_arrow_right),
selected: true,
onTap: () => pageTransit()
)
)
]
),
// show/hide in the card
_showProgress ? LinearProgressIndicator() : Container()
]
)
)
)
);
}
}
Result
Look at the ProgressIndicator, it remains there for 2 seconds, and then goes away
1. You need to define a GlobalKey for the Scaffold so that you can use a SnackBar (you can define the GloablKey in your page's State).
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
2. You need to set the key for the Scaffold.
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
...
3. You need to wrap the Card with a GestureDetector and set the onTap function to call showLoading which shows a SnackBar on the bottom of the screen. Call your getDetails function in the showLoading. Full code (except the define key step):
void _showLoading() {
_scaffoldKey.currentState.showSnackBar(new SnackBar(
duration: new Duration(seconds: 2),
content: new Row(
children: <Widget>[
new CircularProgressIndicator(),
new Text("Loading...")
],
),
));
// call to your getDetails and its steps should be here
}
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text("My app"),
),
body: Center(
child: GestureDetector(
child: Card(
child: Row(children: <Widget>[
Expanded(
child: ListTile(
title: Text(
'My card Location',
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700),
),
leading: Icon(Icons.settings),
// color: Colors.blueAccent, size: mediumIconSize),
trailing: Icon(Icons.keyboard_arrow_right),
selected: true,
)),
])),
onTap: () => _showLoading(),
)),
);
}
}
Note: you can also style the SnackBar.
Result:
I am using curved bottom navigation bar and I want everytime to have an option selected as default just for the look(e.g Home button) although I want the user to have the ability to tap it.But when I select as default the user hasn't. What can I do?
class MainClass extends StatelessWidget{
#override
Widget build(BuildContext context) {
return Scaffold(
body: MyRV(),
bottomNavigationBar:CurvedNavigationBar(
height: 50,
index: 1,
color: Colors.orange,
buttonBackgroundColor: Colors.white,
backgroundColor: Colors.blueAccent,
items: <Widget>[
Icon(Icons.arrow_back, size: 20,color: Colors.blueAccent,),
Icon(Icons.home, size: 20,color: Colors.blueAccent,),
Icon(Icons.contact_mail, size: 20,color: Colors.blueAccent,),
],
animationDuration:Duration(
milliseconds: 1000
),
animationCurve: Curves.linearToEaseOut,
onTap: (index) {
if (index==1)
Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){return
b_afandou();})
);
},
),
);
}
}
You have already implement that. Here index: 1 means you have set default button as the button corresponding to index 1.
Check this for more details.
Corrected way to implement curved navigation bar
I noticed that the question is still getting viewed, so I would like to tell you that it was just a bug I guess. Cause I didn't do anything and it started working just fine.
The issue is you are navigation to different route instead of view. Use
body:[yourWidget1,yourWidget2,yourWidget3][_currentIndex]
class MainClass extends StatefulWidget {
#override
State<MainClass> createState() => _MainClassState();
}
class _MainClassState extends State<MainClass> {
int _currentIndex = 1;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: [///this will hold your three page
Text("First View "),
Text("second/middle View "),
Text("Thired View "),
][_currentIndex],
),
bottomNavigationBar: CurvedNavigationBar(
height: 50,
index: _currentIndex,
color: Colors.orange,
buttonBackgroundColor: Colors.white,
backgroundColor: Colors.blueAccent,
items: <Widget>[
Icon(
Icons.arrow_back,
size: 20,
color: Colors.blueAccent,
),
Icon(
Icons.home,
size: 20,
color: Colors.blueAccent,
),
Icon(
Icons.contact_mail,
size: 20,
color: Colors.blueAccent,
),
],
animationDuration: Duration(milliseconds: 1000),
animationCurve: Curves.linearToEaseOut,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}
More about curved_navigation_bar
I want to open a drawer after pushing on the custom button in BottomMenu I have trouble with Scaffold.of(context).openDrawer(), it doesn't work. My BottomMenu is a separate widget class. As I understand, it doesn't work because it's a separate context. How can I get the right context? Or perhaps someone knows another solution.
Here my code reproducer:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Drawer'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
bottomNavigationBar: BottomMenu(),
endDrawer: SizedBox(
width: double.infinity,
child: Drawer(
elevation: 16,
child: Container(
color: Colors.black,
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(
title: Text('Some context here',
style: TextStyle(color: Colors.white))),
ListTile(
title: Text('Some context here',
style: TextStyle(color: Colors.white))),
],
),
),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Call Drawer form menu reproducer',
)
],
),
),
);
}
}
class BottomMenu extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Wrap(
alignment: WrapAlignment.center,
children: <Widget>[
Divider(color: Colors.black, height: 1),
Padding(
padding: const EdgeInsets.symmetric(vertical: 2),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
InkWell(
borderRadius: new BorderRadius.circular(20.0),
customBorder: Border.all(color: Colors.black),
child: Container(
padding: EdgeInsets.only(
left: 3, right: 6, bottom: 15, top: 11),
child: Row(
children: <Widget>[
Icon(Icons.menu),
Text('Show menu', style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
],
),
),
onTap: () {
Scaffold.of(context).openDrawer();
},
),
],
),
),
],
),
);
}
}
In my case, this worked.
return Scaffold(
key: _scaffoldKey,
endDrawerEnableOpenDragGesture: false, // This!
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.white),
leading: IconButton(
icon: Icon(Icons.menu, size: 36),
onPressed: () => _scaffoldKey.currentState.openDrawer(), // And this!
),
),
drawer: DrawerHome(),
....
and _scaffoldKey must be initialized as,
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
under the class.
The problem is that you specified endDrawer on Scaffold yet you're calling Scaffold.of(context).openDrawer().
openDrawer() documentation states:
If the scaffold has a non-null Scaffold.drawer, this function will cause the drawer to begin its entrance animation.
Since your drawer is null, nothing happens.
In contrast, openEndDrawer() informs us:
If the scaffold has a non-null Scaffold.endDrawer, this function will cause the end side drawer to begin its entrance animation.
Since your endDrawer is not null you should use openEndDrawer() method. Alternatively, if you don't care which side the drawer slides in from, you can use drawer instead of endDrawer when building Scaffold.
My problem solved that instead of
Scaffold.of(context).openEndDrawer()
I give key to Scaffold and then I call by state like below
_scaffoldkey.currentState.openEndDrawer()
It solved my problem I hope It also works for you
Scaffold.of(context).openEndDrawer()
The Problem
This issue can occur when you do not use the correct BuildContext when calling Scaffold.of(context).openDrawer() (or openEndDrawer()).
Easiest Solution
Simply wrap whatever calls openDrawer() (or openEndDrawer()) with a Builder widget. This will give it a working context.
Minimal Working Example
// your build method
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: Builder(builder: (context) { // this uses the new context to open the drawer properly provided by the Builder
return FloatingActionButton(onPressed: (() => Scaffold.of(context).openDrawer()));
}),
drawer: const Drawer(
child: Text("MY DRAWER"),
),
);
}
Similar problem here. Clicked on button and nothing happened. The problem is I was using the context of the widget that instantiated Scaffold. Not the context of a child of Scaffold.
Here is how I solved it:
// body: Column(
// children: <Widget>[
// Row(
// children: <Widget>[
// IconButton(
// icon: Icon(Icons.filter_list),
// onPressed: () => Scaffold.of(context).openEndDrawer(), (wrong context)
// ),
// ],
// ),
// ],
// )
To:
body: Builder(
builder: (context) => Column(
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.filter_list),
onPressed: () => Scaffold.of(context).openEndDrawer(),
),
],
),
],
)),
),
Assign Drawer to drawer property in scaffold. Wrap your specific Widget/Button(where you want to open drawer on its click method) with Builder. Use below method on click property:
enter image description here
Scaffold.of(context).openDrawer();
If you have the appbar widget with an action button to launch the drawer and the drawer is never pushed please remember that you need to define after appbar: ... the endDrawer: YOURAppDrawerWIDGET(), or else using the Scaffold.of(context).openEndDrawer() will not work.
Scaffold(
appBar: AppBar(title: Text(_title)),
endDrawer: AppDrawer(), // <-- this is required or else it will not know what is opening
body: SingleChildScrollView(
///...