I have an issue with a bottomNavigationBar, the issue happens only on iPhone X, as there appears some padding below the BNB as if it were inside a SafeArea widget (and its not)
Well, how can I remove that padding? or maybe color it somehow?
This is my code for the build function
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: _buildAppBar(),
drawer: _buildDrawer(),
body: _isLoading
? Center(
child: CircularProgressIndicator(),
)
: new Container(
color: Colors.white,
child: _unauthorizedOrders()),
// floatingActionButton: FloatingActionButton(
// onPressed: () {},
// backgroundColor: primaryColor,
// child: Icon(Icons.flash_on, size: 30.0,),
// tooltip: 'Authorize Orders',
// ),
// floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
backgroundColor: Colors.red,
bottomNavigationBar: BottomAppBar(
child: Container(
height: 40.0,
color: primaryColor,
child: Row(
children: <Widget>[
// Padding(
// padding: const EdgeInsets.only(left: 10.0),
// child: Text(
// 'Orders: ${orders.length}',
// style: TextStyle(
// color: Colors.white,
// fontSize: 18.0,
// fontWeight: FontWeight.bold),
// ),
// ),
],
),
)),
);
}
EDIT: I have added the backgroundColor to the scaffold, removed the docked FAB and wrapped the body inside a container to paint it white, still doesn't work, I have updated the code above to show it
Use
SafeArea(
child: BottomAppBar(...)
);
A work-around will be to set the backgroundColor of your Scaffold to the same color as your BottomNavigationBar and have your content in a container with the color that you want.
Edit:
Here is a Sample code:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'BNB Demo on iPhone X',
theme: new ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.black,
),
home: new MyHomePage(title: 'BNB Demo on iPhone X'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return new SafeArea(
child: new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add, color: Colors.white,),
backgroundColor: Colors.black,
onPressed: _incrementCounter,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: new BottomAppBar(
child: Container(
height: 40.0,
color: Colors.black,
),
),
),
);
}
}
I had the same problem with this bottomAppBar.
I only erased the color attibute.
Hope it helps to someone.
BottomAppBar(
elevation: 0.0,
shape: widget.notchedShape,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)),
color: Colors.white),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: items)
),
color: Colors.teal[50]);
Related
How to make custom navigation bar like default navigation bar to adopt notch problem
Code:
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation
.startDocked, //specify the location of the FAB
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blue,
onPressed: () {
print('OK');
},
tooltip: "start FAB",
child: Container(
height: 60,
margin: EdgeInsets.all(15.0),
child: Icon(Icons.add),
),
elevation: 4.0,
),
bottomNavigationBar: BottomAppBar(
child: Container(
color: Colors.lightBlue,
height: 60,
),
));
This is how I resolved it but here I am not going to used bottomNavigationBar Widget
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation
.startDocked, //specify the location of the FAB
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blue,
onPressed: () {
print('OK');
},
tooltip: "start FAB",
child: Container(
height: 60,
margin: EdgeInsets.all(15.0),
child: Icon(Icons.add),
),
elevation: 4.0,
),
bottomNavigationBar: BottomAppBar(
color: Colors.blue,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
color: Colors.lightBlue,
height: 50,
),
],
),
));
please try safearea widget its really helpfull
import 'package:flutter/material.dart';
class BaseScaffold extends StatelessWidget {
Widget child;
BaseScaffold({Key? key, required this.child}) : super(key: key);
#override
Widget build(BuildContext context) {
return SafeArea(
child:your widget,
);
}
}
Created counter app with one floating action button.
If i want to add one more button for reset the counter, where can i add second floating action button at bottom bar?
Also i have to add any method in void section or is there any reset counter function available?
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Counter App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Counter App'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Text('You have pressed the button $_counter times.'),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 50.0,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
_counter++;
}),
tooltip: 'Increment Counter',
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
floatingActionButton property on Scaffold widget do not need to take FloatingActionButton widget necessarily. It can also take Column or Row widgets.
Below, I'm sharing my Scaffold widget example with two floating action buttons on top of each other.
return Scaffold(
appBar: AppBar(
title: Text(""),
),
body: SingleChildScrollView(/*...*/),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
child: Icon(
Icons.delete
),
onPressed: () {
//...
},
heroTag: null,
),
SizedBox(
height: 10,
),
FloatingActionButton(
child: Icon(
Icons.star
),
onPressed: () => _someFunc(),
heroTag: null,
)
]
)
);
You can use the flutter_speed_dial package: https://pub.dartlang.org/packages/flutter_speed_dial
On the link above have a example showing how to use it. You must use SpeedDial class and on children[] you can add some buttons with SpeedDialChild. The sample below shows 2 FABs.
Example using it:
Widget _getFAB() {
return SpeedDial(
animatedIcon: AnimatedIcons.menu_close,
animatedIconTheme: IconThemeData(size: 22),
backgroundColor: Color(0xFF801E48),
visible: true,
curve: Curves.bounceIn,
children: [
// FAB 1
SpeedDialChild(
child: Icon(Icons.assignment_turned_in),
backgroundColor: Color(0xFF801E48),
onTap: () { /* do anything */ },
label: 'Button 1',
labelStyle: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.white,
fontSize: 16.0),
labelBackgroundColor: Color(0xFF801E48)),
// FAB 2
SpeedDialChild(
child: Icon(Icons.assignment_turned_in),
backgroundColor: Color(0xFF801E48),
onTap: () {
setState(() {
_counter = 0;
});
},
label: 'Button 2',
labelStyle: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.white,
fontSize: 16.0),
labelBackgroundColor: Color(0xFF801E48))
],
);
}
Result:
According to medium post
You can use Column (for vertical alignment) or Row widget (for horizontal alignment) with 2 FAB as children and just set hero Tag null or assign diffent HeroTags.
You can make it by setup "heroTag: null" as below:
Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomLeft,
child: FloatingActionButton(
heroTag: null,
...),
),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
heroTag: null,
...),
),
],
)
Yes, It's worked..!
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () => {},
child: Icon(Icons.navigate_before_rounded),
heroTag: "fab1",
),
FloatingActionButton(
onPressed: () => {},
child: Icon(Icons.navigate_next_rounded),
heroTag: "fab2",
),
]
)
I fixed it with this, also to add space between the buttons you can add a width and the 'hero' tags are very important.
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FloatingActionButton(
backgroundColor: Colors.green,
heroTag: "btn",
onPressed: () => _speak(textEditingController.text),
child: Icon(Icons.play_arrow),
),
SizedBox(
width: 40,
),
FloatingActionButton(
backgroundColor: Colors.red,
heroTag: "btn2",
onPressed: () => _stop(),
child: Icon(Icons.stop),
)
],
),
)
enter image description here
In Flutter Documentation, we can use at most one floating action button on a single screen. We can do it using RawMaterialButton() widget. This widget parent widget of the floating action button
It's something like that
class RoundIconButton extends StatelessWidget {
const RoundIconButton({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return RawMaterialButton(
constraints: BoxConstraints(minHeight: 40, minWidth: 40),
shape: CircleBorder(),
fillColor: Colors.white,
onPressed: () {},
child: Text("+"),
);
}
}
class Fab extends StatelessWidget {
const Fab({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Column(
children: [
RawMaterialButton(),
RawMaterialButton(),
],
);
}
}
I have a small data table and i want to change the column and row background color.
But unfortunately there is no property in DataColumn or DataRow to achieve this.
The only way i found is through modifying the label of DataColumn
DataColumn(label: Container(child: Text('Person'),color: Colors.amberAccent,)),
but there is a default padding for the DataColumn and the color only applies to the text.
and here is my code:
class _ContactLocationsState extends State<ContactLocations> {
#override
Widget build(BuildContext context) {
return Center(
child: DataTable(columns: <DataColumn>[
DataColumn(label: Text('Person')),
DataColumn(label: Text('Rating')),
DataColumn(label: Text('Distance')),
DataColumn(label: Text('Max Price')),
DataColumn(label: Text('Fee')),
], rows: <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text("test")),
DataCell(Text("test")),
DataCell(Text("test")),
DataCell(Text("test")),
DataCell(Text("test")),
],
),
]),
);
}
}
If you are still looking for answer, you can use MaterialStateColor property. Here is the working code
return DataRow.byIndex(
index: row.key,
color: MaterialStateColor.resolveWith(
(states) {
if (row.key % 2 == 0) {
return Colors.blue[50];
} else {
return Colors.white;
}
},
),
I found a way using that you can achieve exactly same look as table and also change the colors of background using Row and Expanded Widgets.
I hope that Following Code Help You.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
AnimationController _controller;
#override
void initState() {
_controller = AnimationController(vsync: this);
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: Text("person")
),
),Expanded(
child: Container(
color: Colors.red,
child: Text("Rating")
),
),Expanded(
child: Container(
color: Colors.green,
child: Text("Distance")
),
),Expanded(
child: Container(
color: Colors.red,
child: Text("Max Price")
),
),Expanded(
child: Container(
color: Colors.green,
child: Text("Free")
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Text("Test")
),
),Expanded(
child: Container(
color: Colors.green,
child: Text("Test")
),
),Expanded(
child: Container(
color: Colors.red,
child: Text("Test")
),
),Expanded(
child: Container(
color: Colors.green,
child: Text("Test")
),
),Expanded(
child: Container(
color: Colors.red,
child: Text("Test")
),
),
],
),
],
),
)
),
);
}
}
TextFormField is not working properly, its blinking continuously and it doesn't allow me to write anything, as I tap on the TextFormField my keyboard appears for a second and disappear instantly. I am confused what wrong I have done with my code, I've matched my code with previous working code, but still getting this behaviour .
Here is my code.
class ComingSoonState extends State<ComingSoon> {
String language;
TextEditingController _textEdititingController ;
#override
void initState() {
_textEdititingController = new TextEditingController(); //Initialised TextEditingController
super.initState();
}
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final Size size = MediaQuery.of(context).size;
final formData = new Form(
key: widget._formKey,
child: new Container(
padding: const EdgeInsets.only(
left: 35.0,
right: 35.0),
child: new Column(
children: <Widget>[
new Theme(
data: theme.copyWith(primaryColor: Colors.black54),
child: new TextFormField(
controller: _textEdititingController, //ADDED CONTROLLER HERE
style: const TextStyle(color: Colors.black54),
decoration: new InputDecoration(
labelText: 'Amount',
labelStyle: const TextStyle(color: Colors.black54)
),
// validator: this._validateEmail,
validator: (val) {
return val.isEmpty
? "Please enter amount"
: null;
},
onSaved: (String value) {
// this._data.email = value;
this.language = value;
}
),
),
],
),
),
);
return Scaffold(
appBar: new AppBar(
leading: null,
title: const Text('Send Money', style: const TextStyle(
color: Colors.white
),
),
),
body: new Container(
color: Colors.grey[300],
child: new ListView(
children: <Widget>[
new Container(
child: new Column(
children: <Widget>[
new Container(
height: 60.0 ,
padding: const EdgeInsets.all(5.0),
child: new Card(
child: new Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: new Text("Available balance in wallet", style:
new TextStyle(color: Colors.black54,
fontSize: 16.0
),),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: new Text("123 KSH", style:
new TextStyle(color: Colors.blueAccent,
fontSize: 16.0
),),
),
],
),
),
) ,
new Container(
//height: 300.0,
padding: const EdgeInsets.all(5.0),
child: new Card(
child: new Container(
child: new Center(
child: new Column(
children: <Widget>[
formData
],
),
),
),
),
)
],
)
),
],
),
),
);
}
}
I added a floating action button that presents a dialog that will show what you entered into the TextField (using the controller). I'm not sure what form key you were passing in before but making the GlobalKey instance a member variable eliminates the keyboard present/dismiss issue.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String language;
TextEditingController _textEditingController;
final _formKey = GlobalKey<FormState>();
#override
void initState() {
_textEditingController =
TextEditingController(); //Initialised TextEditingController
super.initState();
}
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final Size size = MediaQuery.of(context).size;
final formData = Form(
key: _formKey,
child: Container(
padding: const EdgeInsets.only(left: 35.0, right: 35.0),
child: Column(
children: <Widget>[
Theme(
data: theme.copyWith(primaryColor: Colors.black54),
child: TextFormField(
controller: _textEditingController,
//ADDED CONTROLLER HERE
style: const TextStyle(color: Colors.black54),
decoration: InputDecoration(
labelText: 'Amount',
labelStyle: const TextStyle(color: Colors.black54)),
// validator: this._validateEmail,
validator: (val) {
return val.isEmpty ? "Please enter amount" : null;
},
onSaved: (String value) {
// this._data.email = value;
language = value;
}),
),
],
),
),
);
return Scaffold(
appBar: AppBar(
leading: null,
title: const Text(
'Send Money',
style: const TextStyle(color: Colors.white),
),
),
body: Container(
color: Colors.grey[300],
child: ListView(
children: <Widget>[
Container(
child: Column(
children: <Widget>[
Container(
height: 60.0,
padding: const EdgeInsets.all(5.0),
child: Card(
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
"Available balance in wallet",
style: TextStyle(
color: Colors.black54, fontSize: 16.0),
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
"123 KSH",
style: TextStyle(
color: Colors.blueAccent, fontSize: 16.0),
),
),
],
),
),
),
Container(
//height: 300.0,
padding: const EdgeInsets.all(5.0),
child: Card(
child: Container(
child: Center(
child: Column(
children: <Widget>[formData],
),
),
),
),
)
],
)),
],
),
),
floatingActionButton: FloatingActionButton(
// When the user presses the button, show an alert dialog with the
// text the user has typed into our text field.
onPressed: () {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
// Retrieve the text the user has typed in using our
// TextEditingController
content: Text(_textEditingController.text),
);
},
);
},
tooltip: 'Show me the value!',
child: Icon(Icons.text_fields),
),
);
}
}
I'm new to flutter and dart. I am trying to learn both by developing an app. I have taken the udacity course but it only gave me the basics. What I want to know is if it is possible to handle the appBar code separately.
Currently, this is what I have:
class HomePage extends StatelessWidget {
HomePage({Key key, this.title}) : super(key: key);
final String title;
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
leading: new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Menu',
onPressed: () {
print('Pressed Menu');
},
),
title: new Text(title),
titleSpacing: 0.0,
actions: <Widget>[
new Row(
children: <Widget>[
new Column(
children: <Widget>[
new Text(
'Firstname Lastname',
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
),
),
new Text("username#email.com",
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
)),
],
mainAxisAlignment: MainAxisAlignment.center,
),
new Padding(
padding: new EdgeInsets.all(8.0),
child: new Image.network(
'https://s5.postimg.cc/bycm2rrpz/71f3519243d136361d81df71724c60a0.png',
width: 42.0,
height: 42.0,
),
),
],
),
],
),
body: new Center(
child: Text('Hello World!'),
),
);
}
}
However, I would like to handle the appbar code separately as I believe it can swell a bit more. I have tried something like this:
class HomePage extends StatelessWidget {
HomePage({Key key, this.title}) : super(key: key);
final String title;
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: MyAppBar(),
body: new Center(
child: Text('Hello World!'),
),
);
}
}
class MyAppBar extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new AppBar(
leading: new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Menu',
onPressed: () {
print('Pressed Menu');
},
),
title: new Text(title),
titleSpacing: 0.0,
actions: <Widget>[
new Row(
children: <Widget>[
new Column(
children: <Widget>[
new Text(
'Firstname Lastname',
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
),
),
new Text("username#email.com",
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
)),
],
mainAxisAlignment: MainAxisAlignment.center,
),
new Padding(
padding: new EdgeInsets.all(8.0),
child: new Image.network(
'https://s5.postimg.cc/bycm2rrpz/71f3519243d136361d81df71724c60a0.png',
width: 42.0,
height: 42.0,
),
),
],
),
],
);
}
}
But then I'm getting this message:
The argument type 'MyAppBar' can't be assigned to the parameter type 'PreferredSizeWidget'
I have an intuition that this might not be possible. As I said, I'm new to flutter and dart and I have tried looking in the documentation and in other posts to no avail. Sorry if this seems stupid. I would just really like for someone to point me to the documentation, if there is any, on how to achieve this kind of things or any resource that can help me better understand how this works.
For your kind and valuable help, many thanks in advance!
the appBar widget must implement the PreferredSizeWidget class so you have to :
class MyAppBar extends StatelessWidget implements PreferredSizeWidget
and then you have to implemt this method also
Size get preferredSize => new Size.fromHeight(kToolbarHeight);
Full Example :
class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
#override
Widget build(BuildContext context) {
return new AppBar(
leading: new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Menu',
onPressed: () {
print('Pressed Menu');
},
),
title: new Text(title),
titleSpacing: 0.0,
actions: <Widget>[
new Row(
children: <Widget>[
new Column(
children: <Widget>[
new Text(
'Firstname Lastname',
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
),
),
new Text("username#email.com",
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
)),
],
mainAxisAlignment: MainAxisAlignment.center,
),
new Padding(
padding: new EdgeInsets.all(8.0),
child: new Image.network(
'https://s5.postimg.cc/bycm2rrpz/71f3519243d136361d81df71724c60a0.png',
width: 42.0,
height: 42.0,
),
),
],
),
],
);
}
#override
Size get preferredSize => new Size.fromHeight(kToolbarHeight);
}
class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
#override
Widget build(BuildContext context) {
return AppBar(
backgroundColor: Colors.blueGrey,
title: Text('News App'),
centerTitle: true,
leading: Icon(Icons.menu ),
);
}
#override
// TODO: implement preferredSize
Size get preferredSize => new Size.fromHeight(48);
}