Flutter layout issue about Flexible - layout

I am developing a flutter app, but it show error when I run the app.
I don't understand what is the problem. I think I mix up the logic of how the widget expand in layout.
Please kindly help to solve this issue.
error message:
flutter: The following assertion was thrown during performResize():
flutter: Vertical viewport was given unbounded height.
Viewports expand in the scrolling direction to fill their container.In this case, a vertical
viewport was given an unlimited amount of vertical space in which to expand. This situation
typically happens when a scrollable widget is nested inside another scrollable widget.
Here with my code:
body: Container(
child: Flexible(
child: FirebaseAnimatedList(
query: databaseReference,
itemBuilder: (_, DataSnapshot snapshot,
Animation<double> animation,
int index) {
return new Card(
color: Colors.black38,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ListTile(
leading: IconButton(
icon: Icon(Icons.format_list_bulleted),
color: Colors.blueAccent,
splashColor: Colors.greenAccent,
onPressed: () {
// Perform some action
debugPrint('button ok');
},
),
title: Text(shopList[index].shopName),
subtitle: Text(shopList[index].address),
),
Container(
child: Flexible(
child: Form(
key: formShopKey,
child: ListView(
children: <Widget>[
ListTile(
leading: Icon(
Icons.money_off,
color: Colors.white,
),
title: TextFormField(
maxLength: 100,
initialValue: "",
maxLines: 3,
//onSaved: (val) => booking.seafoodRequest = val,
//validator: (val) => val == "" ? val : null,
decoration: new InputDecoration(
),
),
),
],
),
),
),
),
ButtonTheme.bar(
// make buttons use the appropriate styles for cards
child: new ButtonBar(
children: <Widget>[
new FlatButton(
child: const Text('BUY TICKETS'),
onPressed: () {
/* ... */
},
),
new FlatButton(
child: const Text('LISTEN'),
onPressed: () {
/* ... */
},
),
],
),
),
],
),
);
},
),
),
);
[1]: https://i.stack.imgur.com/5vAsv.png
[2]: https://i.stack.imgur.com/LuZEl.png

I had to fill in a few gaps but the below should build for you. I also swapped FirebaseAnimatedList with a regular AnimatedList to get it to build. You can compare and adjust the layout.
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,
),
home: new MyHomePage(title: 'Flutter Demo'),
);
}
}
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> {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: AnimatedList(
initialItemCount: 10,
itemBuilder: (BuildContext context, int index,
Animation<double> animation) {
return new Card(
color: Colors.black38,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ListTile(
leading: IconButton(
icon: Icon(Icons.format_list_bulleted),
color: Colors.blueAccent,
splashColor: Colors.greenAccent,
onPressed: () {
// Perform some action
debugPrint('button ok');
},
),
title: Text('Name'),
subtitle: Text('Address'),
),
Container(
constraints: BoxConstraints(
minHeight: 100.0,
maxHeight: 200.0,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: Form(
child: ListView(
children: <Widget>[
ListTile(
leading: Icon(
Icons.money_off,
color: Colors.white,
),
title: TextFormField(
maxLength: 100,
initialValue: "",
maxLines: 3,
//onSaved: (val) => booking.seafoodRequest = val,
//validator: (val) => val == "" ? val : null,
decoration: new InputDecoration(),
),
),
],
),
),
),
],
),
),
ButtonTheme.bar(
// make buttons use the appropriate styles for cards
child: new ButtonBar(
children: <Widget>[
new FlatButton(
child: const Text('BUY TICKETS'),
onPressed: () {
/* ... */
},
),
new FlatButton(
child: const Text('LISTEN'),
onPressed: () {
/* ... */
},
),
],
),
),
],
),
);
},
),
),
],
),
);
}
}

Related

Flutter Duplicate Global Key detected on widget tree

I have this issue when implementing flutter's showcaseview despite following its official documentation. The errors I get have to do with a duplicate global state and here's a sample if my code:
final GlobalKey _timeline_filter = GlobalKey();
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
Future.delayed(const Duration(milliseconds: 400), () {
print("showcasing..");
ShowCaseWidget.of(context).startShowCase([_timeline_filter]);
});
});
}
Build method Code:
#override
Widget build(BuildContext context) {
return Material(
child: Container(
child: ListView(
controller: scroll_controller,
shrinkWrap: true,
children: <Widget>[
Container(
child: Column(
children: [
Container(
margin: EdgeInsets.only(
left: 83.5.w,
),
child: SizedBox(
width: 10.w,
child: FloatingActionButton(
elevation: 0.4.h,
backgroundColor: Colors.white,
foregroundColor: Colors.black,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FilterTags()));
},
child: Showcase(
key: _timeline_filter,
description: "tap to filter by category",
child: Icon(FontAwesomeIcons.filter, size: 11.sp)),
),
)),
],
)),
buildTimelinePosts(),
],
),
),
);
}

How cam we place the layouts in flutter at center

I want to place the card in the center
here the code
class _HomeState extends State<Home>{
#override
Widget build(BuildContext context) {
var myActivity=["Join Meeting","Create Meeting", "Schedule Meeting","Yet to be decided"];
var myGridView = new GridView.builder(
itemCount: myActivity.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context,int index) {
return new GestureDetector(
child: Card(
elevation: 5.0,
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 10.0),
child: Text(myActivity[index]),
),
),
onTap: () {
showDialog(
barrierDismissible: false,
context: context,
child: CupertinoAlertDialog(
content: Text(myActivity[index],),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Ok"))
],
)
);
},
);
},
);
return Scaffold(
body: myGridView,
);
}
}
Two things required to do that first wrap Grid Widget inside Center Widget & give GridView property as shrinkWrap: true,
#override
Widget build(BuildContext context) {
print("In Test Widget");
// TODO: implement build
var myActivity=["Join Meeting","Create Meeting", "Schedule Meeting","Yet to be decided"];
var myGridView = new GridView.builder(
itemCount: myActivity.length,
shrinkWrap: true,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context,int index) {
return new GestureDetector(
child: Card(
elevation: 5.0,
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 10.0),
child: Text(myActivity[index]),
),
),
onTap: () {
showDialog(
barrierDismissible: false,
context: context,
child: CupertinoAlertDialog(
content: Text(myActivity[index],),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Ok"))
],
)
);
},
);
},
);
return Scaffold(
body: Center(child: myGridView),
);
}
You can wrap your view(Card) with Row component and set mainAxisAlignment attribute to MainAxisAlignment.center like below.
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Card(
elevation: 5.0,
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 10.0),
child: Text(myActivity[index]),
),
)
],
),
To display the GridView at the center of the screen, you can simply wrap myGridView inside a Center widget like this..
return Scaffold(
body: Center(child: myGridView),
);
You also need to set the GridView's shrinkWrap parameter to true. Otherwise gridView will take up the whole screen and so visually the Center widget will have no effect on its position.
Wrap your layout in a Column() and set MainAxisAlignment to center.
Column(
mainAxisAlignment: MainAxisAlignment.center,
child: <--YOUR EXISTING LAYOUT -->)
It can also center horizontally with crossAxisAlignment.

How can i display different widgets in a list : Flutter

I'm trying to recreate this ui template in which a I have list under that list is a list of items and after all the items is a container displaying a summary. I'm trying to achieve this by wrapping the listview.builder and a container inside a list view however it doesn't show anything. This is the code.
Container(
height: 550.0,
child: ListView(
children: <Widget>[
Expanded(
child: ListView.builder(
physics: ClampingScrollPhysics(),
scrollDirection: Axis.vertical,
itemCount: itemList.length,
itemBuilder: (BuildContext context, int index) {
return SingleItem(
itemImage: itemList[index]['image'],
itemPrice: itemList[index]['price'],
itemName: itemList[index]['name'],
itemCode: itemList[index]['code'],
);
},
),
),
Expanded(
child: Container(
color: Colors.brown,
),
)
],
)
),
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',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
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),
),
body: SingleChildScrollView(
child: Column(
children: [
ListView.builder(
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.all(20.0),
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(width: 1, color: Colors.grey)),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: 50,
height: 50,
color: Colors.blueAccent,
),
SizedBox(
width: 30,
),
Column(
children: [Text("Title"), Text('Tag'), Text('Price')],
)
],
),
);
},
),
Container(
width: double.infinity,
child: Card(
color: Colors.redAccent,
elevation: 1.0,
child: (Column(children: [
Text(
'Summary',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
SizedBox(
height: 10.0,
),
Text("""
This is the summary of your products
""")
])),
),
)
],
)),
);
}
}
Try this out:
https://codepen.io/theredcap/pen/qBbjLWp
You can look at this to give you an idea
return Column(
children: [
Expanded(
child: ListView.builder(
itemCount: 6,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.all(16),
height: 170,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12)
]),
child: Row(
children: [
Image.asset(
"assets/images/Item_1.png", // your image
fit: BoxFit.cover,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: () {},
child: Image.asset(
"assets/images/Item_1.png", // your icon/image
width: 50,
height: 30,
)),
),
Text(
"Circle Miracle Plate Studs Earrings",
style: TextStyle(
fontSize: 13, fontWeight: FontWeight.bold),
),
Text(
"SKU: 23fe42f44",
style: TextStyle(fontSize: 13),
),
SizedBox(height: 5),
Text(
"\$ 7,500",
style: TextStyle(fontSize: 13),
),
Row(children: [
Text(
"Qty: ",
style: TextStyle(fontWeight: FontWeight.bold),
),
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 20,
style: TextStyle(color: Colors.deepPurple),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)
]),
Text("Ship By: 30 June2020")
],
),
),
),
],
),
);
}),
),
Container(
height: 100,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Summary",
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
SizedBox(
height: 12,
),
Table(children: [
TableRow(children: [
Text("Subtotal"),
Text("102000"),
]),
TableRow(children: [
Text("Shipping Charge"),
Text("Free"),
]),
TableRow(children: [
Text("Shipping Insurance"),
Text("Free"),
]),
TableRow(children: [
Text("Grand Total"),
Text("102000"),
]),
]),
],
),
)
],
)
;

Place a button after Gridview.count - Flutter

I have four cards simply now i want a button in the end and center how would it would be
Insert GridView.counter in a Column
set shrinkWrap and primary property as true
put your button inside Column and below gridview, not inside button.
put the button in Center Widget / set crossAxisAlignment: CrossAxisAlignment.center
import 'package:flutter/material.dart';
class Test extends StatefulWidget {
#override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> with SingleTickerProviderStateMixin{
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page - 2"),
),
body: SafeArea(
child: Column(
children: <Widget>[
GridView.count(
shrinkWrap: true,
primary: true,
crossAxisCount: 2,
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.green,
),
Container(
color: Colors.blue,
),
Container(
color: Colors.yellow,
),
],
),
Divider(
color: Colors.grey.shade600,
),
Center(
child: RaisedButton(
child: Text("Button"),
onPressed: (){},
),
)
],
),
),
);
}
}

How to stack a keyboard on flutter

Currently I have a listview of widgets and I stack a bottom button on the Top of the Stack to be always display. but when I tap on the textfield, the bottom button is push on the top, It's very ugly. How can I push the keyboard over the Button ?
thank you
here is a code example:
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final TextEditingController _controller = new TextEditingController();
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
),
body: new Stack(
children: <Widget>[
new ListView(
children: <Widget>[
new Column(
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(100.0),),
new Card(
child: new Padding(
padding: const EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new TextField(
controller: _controller,
decoration: new InputDecoration(hintText: "Enter an address"),
),
),
],
),
),
),
],
)
],
),
new Align
(
alignment: Alignment.bottomCenter,
child : new RaisedButton(
child: new Text("Button", style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 18.0,)),
onPressed: (){
},
highlightElevation: 4.0,
highlightColor : Colors.white,
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
),
),
]
)
);
}
}
I would recommend putting the "Button" on the Bottom outside of the Stack inside of a floatingActionButton.
floatingActionButton: FloatingActionButton.extended(
elevation: 4.0,
label: Text(Appliquer),
onPressed: () {},
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
EDIT AFTER CODE WAS ADDED:
As I said in the comments I would use a FloatingActionButton/BottomNaviagtionBar or a Save-Icon in the AppBar
Here I added the FloatingActionButton to your code:
class _MyHomePageState extends State<MyHomePage> {
final TextEditingController _controller = new TextEditingController();
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(),
body: new Stack(children: <Widget>[
new ListView(
children: <Widget>[
new Column(
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(100.0),
),
new Card(
child: new Padding(
padding: const EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: "Enter an address"),
),
),
],
),
),
),
],
)
],
),
],
),
floatingActionButton: FloatingActionButton.extended(
icon: Icon(Icons.save), label:
new Text('Appliquer'),
onPressed: () { /*perform your Action here*/ },
),
);
}
}

Resources