For some reason the ListView isn't showing up. I think that the height of one of widgets is getting a non-height from its parent... maybe? It seems that there are widgets that don't auto-size with its contents. I don't want to force a size for any of the containers because they could contain different amounts of information. https://codepen.io/dhust/pen/vYGZLPZ
Update:
Error: Cannot hit test a render box with no size. The hitTest() method was called on this RenderBox:
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
child: Column(
children: [
Row(
children: [
Container(
child: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: 4,
itemBuilder: (BuildContext context, int index) {
return Text("Hi");
},
),
),
],
),
),
],
),
],
),
),
),
);
}
}
For ListView add shrinkWrap: true, to avoid "Vertical viewport was given unbounded height." error and Use Expanded for its parent Column to avoid "constraints.hasBoundedWidth is not true".
Column(
children: [
Row(
children: [
Expanded( // Use Expanded here
child: Container(
child: Column(
children: [
ListView.builder(
shrinkWrap: true, // and use shrinkWrap
itemCount: 4,
itemBuilder: (BuildContext context, int index) {
return Text("Hi");
},
),
],
),
),
),
],
),
],
),
result:
Related
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(),
],
),
),
);
}
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.
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: (){},
),
)
],
),
),
);
}
}
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*/ },
),
);
}
}
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: () {
/* ... */
},
),
],
),
),
],
),
);
},
),
),
],
),
);
}
}