I'm trying to make a simple AppBar widget with some icons in Flutter, but I keep getting this assertion:
The following assertion was thrown building IconButton(Icon(IconData(U+0E5D2)); disabled; tooltip:
I pretty much just mimiced the documentation, but here is my code:
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: "Stateless Widget Example",
home: new AppBar(title: new Text("App Bar"))
));
}
class AppBar extends StatelessWidget {
AppBar({this.title});
final Widget title;
#override
Widget build(BuildContext context) {
return new Container(
height: 56.0,
padding: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: new BoxDecoration(
color: Colors.cyan,
border: new Border(
bottom: new BorderSide(
width: 1.0,
color: Colors.black
)
)
),
child: new Row (
children: <Widget> [
new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null, // null disables the button
),
new Expanded(child: title)
]
)
);
}
}
I feel like I'm missing an import or something. But I'm not completely sure. Perhaps my computer was just acting up, because Flutter run has been buggy for me. I'm new to Dart and Flutter, so perhaps I'm just not seeing an obvious error.
IconButton is a Material Widget, so you need to use it inside a Material parent, for example something like this:
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text(widget.title), actions: <Widget>[
new IconButton(
icon: new Icon(Icons.favorite),
tooltip: 'Favorite',
onPressed: () {},
),
new IconButton(
icon: new Icon(Icons.more_vert),
tooltip: 'Navigation menu',
onPressed: () {},
),
]),
body: new Center(
child: new Text('This is the body of the page.'),
),
);
}
Check to ensure that your pubspec.yaml contains the following:
flutter:
uses-material-design: true
That will ensure that the Material Icons font is included with your application, so that you can use the icons in the Icons class.
addButton() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: SizedBox(
height: 45,
width: 200,
child: ElevatedButton.icon(
onPressed: () async {},
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
)),
elevation: MaterialStateProperty.all(1),
backgroundColor: MaterialStateProperty.all(Colors.blue),
),
icon: Icon(Icons.add, size: 18),
label: Text("Add question"),
),
),
),
],
);
}
you lost meterial widget
IconButton needs Material
return new Material(
child: new Container(
height: 56.0,
padding: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: new BoxDecoration(
color: Colors.cyan,
border: new Border(
bottom: new BorderSide(
width: 1.0,
color: Colors.black
)
)
),
child: new Row (
children: <Widget> [
new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null, // null disables the button
),
new Expanded(child: title)
]
)
);
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,
);
}
}
Is there a possibility to set title and perhaps navigation back button on this showModalBottomSheet?
I expect something like this...
Yes it's possible to do something like that in Flutter. You can use Column Widget and make its first child as a title bar or something like that with title and back arrow icon.
Here's the code for that:
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
canvasColor: Colors.transparent,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget{
#override
HomePageS createState()=> HomePageS();
}
class HomePageS extends State<MyHomePage>{
#override
Widget build(BuildContext context){
return Scaffold(
body: Container(
color: Colors.white,
child: Center(
child: FlatButton(
child: Text("Show BottomSheet"),
onPressed: () async{
showModalBottomSheet(
context: context,
builder: (BuildContext context){
return ClipRRect(
borderRadius: BorderRadius.only(topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)),
child: Container(
color: Colors.white,
child: Column(
children: [
ListTile(
leading: Material(
color: Colors.transparent,
child: InkWell(
onTap: (){
Navigator.of(context).pop();
},
child: Icon(Icons.arrow_back) // the arrow back icon
),
),
title: Center(
child: Text("My Title") // Your desired title
)
),
]
)
)
);
}
);
}
)
)
)
);
}
}
Here is the output:
If you don't wanna use the InkWell widget, you can use the IconButton widget like this:
...
ListTile(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: (){
Navigator.of(context).pop();
}
),
title: Center(
child: Text("My Title")
)
),
...
But if you noticed, the title text is not really centered. In this case, we can replace the ListTile widget to a Stack widget and do something like this:
child: Column(
children: [
Stack(
children: [
Container(
width: double.infinity,
height: 56.0,
child: Center(
child: Text("My Title") // Your desired title
),
),
Positioned(
left: 0.0,
top: 0.0,
child: IconButton(
icon: Icon(Icons.arrow_back), // Your desired icon
onPressed: (){
Navigator.of(context).pop();
}
)
)
]
),
]
)
...
This is the output:
But what would happen if we have a very long text for our title? It would definitely look like this:
Ugly, right? We can see that our Text widget overlaps with our IconButton widget. To avoid this, we can replace our Stack widget with a Row widget.
Here's the code for that:
...
child: Column(
children: [
Row( // A Row widget
mainAxisAlignment: MainAxisAlignment.spaceBetween, // Free space will be equally divided and will be placed between the children.
children: [
IconButton( // A normal IconButton
icon: Icon(Icons.arrow_back),
onPressed: (){
Navigator.of(context).pop();
}
),
Flexible( // A Flexible widget that will make its child flexible
child: Text(
"My Title is very very very very very very very long", // A very long text
overflow: TextOverflow.ellipsis, // handles overflowing of text
),
),
Opacity( // A Opacity widget
opacity: 0.0, // setting opacity to zero will make its child invisible
child: IconButton(
icon: Icon(Icons.clear), // some random icon
onPressed: null, // making the IconButton disabled
)
),
]
),
]
)
Output would be like this:
And this (if the title is not long):
I guess I have naive solution but this works perfectly for me. You might as well try it.
showModalBottomSheet(
barrierColor: Colors.transparent,
enableDrag: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
context: context,
builder:(context){
return Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0, bottom: 8.0),
child: Stack(children: [
Padding(
padding: const EdgeInsets.only(top: 65),
child: SingleChildScrollView(
child:<<Scrollable Wdgets>>,
),
),
Card(
elevation: 3,
color: Colors.grey[850],
child: ListTile(
leading: Text("YOUR TITLE",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w500)),
trailing: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(
Icons.close,
color: Colors.white,
size: 20,
),
),
),
),
]),
);}
I have this simple form, with a textarea and buttons:
When I open the keyboard, I want to decrease the size of the textarea, like a responsive layout. If I close the keyboard, the textarea should fill the remaining screen space available.
desired effect: open / active keyboard
desired effect: closed/no keyboard
My intention is to make the components fill in the screen, regardless device resolution.
Can someone provide a valida example of it? I tried several implementations and I was not able to achive the desired effect.
UPDATE:
My current code for this screen:
new MaterialPageRoute(
builder: (context) {
return new Scaffold(
resizeToAvoidBottomPadding: true,
appBar: new AppBar(
title: new Text('Add new Grocery List'),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.delete),
tooltip: 'Clear Grocery List',
onPressed: () {
this._promptRemoveGroceryBatchList();
},
),
]
),
body: new Container(
padding: const EdgeInsets.all(5.0),
child: new Form(
key: this._formGroceryBatchAdd,
child: new ListView(
children: <Widget>[
new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new TextFormField(
maxLines: 10,
autofocus: true,
decoration: new InputDecoration(
labelText: 'Item List',
hintText: 'Enter a grocery list',
contentPadding: const EdgeInsets.all(16.0)
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter at least one grocery item';
}
},
onSaved: (value) {
this._formBatchGroceryData = value;
},
),
new Padding(
padding: new EdgeInsets.all(8.0),
child: new Text(
'One item per line. Use ":" to specifcy the amount.\n' +
'Example:\n' +
'Potatoes:12\n' +
'Tomatoes:6',
style: new TextStyle(fontSize: 12.0, color: Colors.black54),
),
),
],
),
),
new Container(
child: new ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new RaisedButton(
child: new Text('Add Items'),
color: Theme.of(context).primaryColor,
textColor: Colors.white,
elevation: 4.0,
onPressed: () {
// ACTION GOES HERE
},
),
new RaisedButton(
child: new Text('Cancel'),
onPressed: () {
// ACTION GOES HERE
},
),
]
),
),
]
)
);
)
);
}
)
I'm afraid it can't be directly done using a TextField for the textarea because its size depends on the lines of text you have.
But you can simulate it by surrounding the TextField that allows unlimited lines with a Container.
This is a sample that could work for 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',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Flutter Demo Home Page'),
),
body: new Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(4.0),
),
child: Padding(
padding: const EdgeInsets.only(
left: 10.0, bottom: 20.0, right: 10.0),
child: new TextField(
maxLines: null,
decoration: InputDecoration(
border: InputBorder.none,
),
),
),
),
),
),
],
),
);
}
}
I am writing an app that needs to have a bottomsheet with corner radius. Something like you can see in the Google Task app.
Here is the code I have
showModalBottomSheet(
context: context,
builder: (builder) {
return new Container(
height: 350.0,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0), topRight: const Radius.circular(10.0))),
child: new Center(
child: new Text("This is a modal sheet"),
)),
);
});
Is still shows the sheet without the border radius.
Okay, I found a reason. It is indeed displaying the rounded corner but the background of the Container is staying white due to Scaffold background color.
Now the question is how do I override the Scaffold background color.
For those who still trying to resolve this:
for some reasons Colors.transparent does not work, so all you need to do is change color to : Color(0xFF737373)
showModalBottomSheet(
context: context,
builder: (builder) {
return new Container(
height: 350.0,
color: Color(0xFF737373),
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0), topRight: const Radius.circular(10.0))),
child: new Center(
child: new Text("This is a modal sheet"),
)),
);
});
use shape property inside show showModalBottomSheet and give it RoundedRectangleBorder.
showModalBottomSheet(
context: context,
shape : RoundedRectangleBorder(
borderRadius : BorderRadius.circular(20)
),
builder: (builder) {
return new Container(
height: 350.0,
color: Color(0xFF737373),
child: new Container(
child: new Center(
child: new Text("This is a modal sheet"),
)),
);
});
_settingModalBottomSheet(context) {
showModalBottomSheet(
context: context,
builder: (BuildContext bc){
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(ScreenUtil().setWidth(16)),
topRight: Radius.circular(ScreenUtil().setWidth(16))
),
),
);
}
);
}
It looks like this:
result_1
After add below code in main.dart:
return MaterialApp(
theme: ThemeData(
canvasColor: Colors.transparent
),
);
It looks like this:
result_2
Use this code, it's working perfectly for me!
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0))
Here is the full code.
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
context: context,
builder: (BuildContext bc) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter state) {
return SingleChildScrollView(
child: InkWell(
onTap: () {},
child: Container(
margin:
EdgeInsets.only(left: 10, right: 10, bottom: 10),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: Container()))));
});
});
Output:
Okay, so changing the canvasColor in my app's main theme to Colors.transparent worked.
USE ClipRRect Widget like below.
showMaterialModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
builder: (context, scrollController) =>
ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Container(
height:
MediaQuery.of(context).size.height *
0.95,
child: whateverChild();
Use shape property.
showModalBottomSheet(
context: context,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40),
),
),
builder: (builder) {
return new Container(
height: 350.0,
color: Colors.transparent,
child: YourWidget(),
});
You should also check the widgets on the sheet.
Even if the border is applied, it seems that other widgets fill the space and are not applied.
Use padding, etc. to secure the upper space of the seat.
main_screen file:
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
body: Column(
children: [
InkWell(
onTap: () {
_scaffoldKey.currentState!
.showBottomSheet(
(context) => const AddItemBottomSheet(),
backgroundColor: Colors.transparent,
);
},
child: Column(children: [
const Icon(
Icons.add_circle_outline_rounded,
size: 32,
),
Text(
'Add Item',
),
]),
),
]
)
);
}
add_item_bottom_sheet.dart
class AddItemBottomSheet extends StatefulWidget {
const AddItemBottomSheet({Key? key}) : super(key: key);
#override
State<AddItemBottomSheet> createState() => _AddItemBottomSheetState();
}
class _AddItemBottomSheetState extends State<AddItemBottomSheet> {
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
blurRadius: 60.0,
color: Colors.black.withOpacity(0.2),
spreadRadius: 50,
offset: const Offset(0.0, -10.0)),
],
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
//Your UI items on BottomSheet
],
),
),
),
);
}
}
I had exactly the same issue when I was using the modal_bottom_sheet library. but after I set the backgroundColor to transparent... it worked like magic
showModalBottomSheet(
context: context,
backgroundColor: Colors.transparent, // Add this line of Code
builder: (builder) {
return new Container(
height: 350.0,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0), topRight: const Radius.circular(10.0))),
child: new Center(
child: new Text("This is a modal sheet"),
)),
);
});
I have not been able to locate any documentation for creating footer nav bars with Flutter/Dart. I know that "crossAxisAlignment: CrossAxisAlignment.end" can be used to pull content to the bottom of a column. However, I'm not sure how to render a site footer that sticks to the bottom of the screen. There are various solutions in flex and css grid, but not clear on what implementation would look like in this platform.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
Widget siteLogo = new Container(
padding: const EdgeInsets.only(top: 100.0),
child: new Image.asset(
'images/logo.png',
width: 180.0,
height: 180.0,
),
);
Widget titleTextSection = new Container(
padding: const EdgeInsets.only(left: 80.0, right: 80.0, top: 30.0, bottom: 20.0),
child: new Text(
''' Welcome to The Site''',
textAlign: TextAlign.center,
style: new TextStyle(
fontSize: 35.0,
fontWeight: FontWeight.w500,
),
),
);
Widget subtitleTextSection = new Container(
padding: const EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0),
child: new Text(
'''Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet Donec imperdiet.''',
textAlign: TextAlign.center,
style: new TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w400
),
),
);
// footer
Column signInLink(String label) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Container(
child: new Text(
label,
style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w400,
color: const Color(0xFFf735e9)
),
),
),
],
);
}
Column existingAccountLink(String label) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Container(
child: new Text(
label,
style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w400,
color: const Color(0xFFeceff1)
),
),
),
],
);
}
Widget footer = new Container(
height: 50.0,
decoration: new BoxDecoration(color: Colors.black),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
existingAccountLink('Already have an account?'),
signInLink('SIGN IN'),
],
),
);
return new MaterialApp(
title: 'Flutter Demo',
home: new Scaffold(
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('images/backgroundimg.jpg'),
fit: BoxFit.cover,
),
),
child: new ListView(
children: [
siteLogo,
titleTextSection,
subtitleTextSection,
footer,
],
),
)
),
);
}
}
As you can see, I am currently using ListView to layout the widgets. The only thing I can think of right now is to put the whole ListView in a single column, crossAxisAlign to End so everything gets pulled down, and then style each widget relative to the footer. There must be a better way though?
Since you are using Scaffold, you can use bottomNavigationBar to have a 'sticky' bottom widget. (And potentially use BottomNavigationBar if you want to)
new Scaffold(
appBar: new AppBar(title: new Text("Title")),
body: new ListView.builder(
itemBuilder: (context, index) {
return new ListTile(
title: new Text("title $index"),
);
},
),
bottomNavigationBar: new Container(
height: 40.0,
color: Colors.red,
),
);
Alternatively your
The only thing I can think of right now is to put the whole ListView in a single column
is not a bad idea at all. That's how things works in flutter.
Although MainAxisAlignement.end is not the right way to do it.
You could achieve the same layout as with bottomNavigationBar without a Scaffold, using a Column this way :
new Column(
children: <Widget>[
new Expanded(
child: new ListView.builder(
itemBuilder: (context, index) {
return new ListTile(
title: new Text("title $index"),
);
},
),
),
new Container(
height: 40.0,
color: Colors.red,
),
],
),
The use of a listview is an excellent choice when you have a list of items that need a listview. Sometimes the other items in the layout might be fixed and do not need a listview. e.g using a column.
Example on how to achieve fixed bottom footer using stack.
#override
Widget build(BuildContext context) {
return new Material(
child: Scaffold(
body: Stack(
children : <Widget> [
Text("Top positioned text"),
Column(
children : <Widget> [
Text("Column:Top positioned text"),
Text("Column:Top positioned text")
]
),
Positioned(
bottom : 0,
child: Text("Bottom positioned text")
)
]
)
}
you can use Footer from flutter_layouts
sticky footer can be hard to implement. since you have to know the height of footer, it is not possible to perform this in build() function.
try out below flutter package.
https://github.com/softmarshmallow/flutter-layouts/tree/master/lib/src/footer
https://github.com/softmarshmallow/flutter-layouts/
by this, you can use footer with scaffold bottom nav. example
import 'package:flutter_layouts/flutter_layouts.dart';
class _FooterScreenState extends State<FooterScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("footer demo"),
),
body: buildBody(),
bottomNavigationBar: BottomNavigationBar(items: [
BottomNavigationBarItem(icon: Icon(Icons.add), title: Text("first")),
BottomNavigationBarItem(icon: Icon(Icons.remove), title: Text("second"))
]),
);
}
Widget buildBody() {
return Footer(
body: buildContent(),
footer: buildFooter(),
);
}
Widget buildContent() {
return ListView.builder(
itemBuilder: (c, i) {
return Card(
margin: EdgeInsets.all(16),
child: Container(
padding: EdgeInsets.all(24),
child: Text("contents"),
),
);
},
itemCount: 20,
);
}
Widget buildFooter() {
return Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(color: Theme.of(context).primaryColor),
child: FlatButton(
onPressed: () {},
child: Text("Lean more", style: Theme.of(context).textTheme.button.copyWith(
color: Theme.of(context).colorScheme.onBackground
),),
),
);
}
}