How to include a RaisedButton in a Container - flutter

I want a Raisedbutton that appears after the Container.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Galeria clase 1'),
),
body: Container(padding: EdgeInsets.all(8), child: galeria(array)),
floatingActionButton: FloatingActionButton(
onPressed: _optionsDialogBox,
tooltip: 'Pick Image',
child: Icon(Icons.add_outlined),
),
);
}enter code here
I tried this but there is the next error -> RenderBox was not laid out: RenderFlex#02bd4 relayoutBoundary=up1
body: Column(children: <Widget>[
(Container(
padding: EdgeInsets.all(8),
child: galeria(
array,
),
)),
RaisedButton(
child: Text("Guardar red"),
onPressed: () {
safeNeuralNetwork();
},
),
]),

galeria Function
Widget galeria(List<Uint8List> array) {
return StaggeredGridView.countBuilder(
crossAxisCount: 2,
itemCount: array.length,
itemBuilder: (BuildContext context, int index) {
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
color: Colors.deepPurple,
child: Column(
children: <Widget>[Image.memory(array[index])],
),
),
);
},
// staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
);
}

StaggeredGridView (or nearly any ScrollView) widget can't work with unbounded (infinite) height like in your case. You can't have a Column widget and a ScrollView inside it without using Expanded or something like that. Why? Because you need something to limit the maximum height of that widget. In this case we will use an Expanded widget. So go and modify your code like this:
body: Column(
children: <Widget>[
Expanded(
child: Padding(
child: galeria(array),
padding: EdgeInsets.all(8.0),
),
),
RaisedButton(
onPressed: () {
safeNeuralNetwork();
},
child: Text("Guardar red"),
),
],
),
With this we basically said: "Hey, go and render this column but please, stick a RaisedButton at the bottom and use the remaining space for the StaggeredGridView.".

Related

ListView doesn't separate objects from doc

I'm trying to create scrollable list of posts, but instead i got static non-scrollable bloc of strings, which is overflowing.
Example:
Oveflowing:
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _writePost,
tooltip: 'Increment',
child: Icon(Icons.create, color: Colors.grey[300]),
),
body: SizedBox(
child: Container(
child: Column(children: [
StreamBuilder<List<Post>>(
initialData: const [],
stream: _socketStream.stream,
builder: (context, snapshot) {
if (_isLoading) {
return const Center(
child: CircularProgressIndicator(),
);
}
ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
...snapshot.data!.map<Widget>(
(post) => Padding(
key: ValueKey(post.id),
padding: const EdgeInsets.symmetric(vertical: 10),
child: ListTile(
title: Text(
post.content,
style: const TextStyle(fontSize: 20),
),
trailing: MaterialButton(
onPressed: () {
_deletePost(post.id);
},
child: const Icon(
Icons.delete,
size: 30,
),
),
),
),
)
],
);
},
),
]))));
}
Moreover, they all go like a single card, without separating.
Edited code, which is scrolling but doesn't separate posts
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _writePost,
tooltip: 'Increment',
child: Icon(Icons.create, color: Colors.grey[300]),
),
body: SizedBox(
height: 500,
child:
StreamBuilder<List<Post>>(
initialData: const [],
stream: _socketStream.stream,
builder: (context, snapshot) {
if (_isLoading) {
return const Center(
child: CircularProgressIndicator(),
);
}
return Card(child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
...snapshot.data!.map<Widget>(
(post) => Padding(
key: ValueKey(post.id),
padding: const EdgeInsets.symmetric(vertical: 10),
child: ListTile(
title: Text(
post.content,
style: const TextStyle(fontSize: 20),
),
trailing: MaterialButton(
onPressed: () {
_deletePost(post.id);
},
child: const Icon(
Icons.delete,
size: 30,
),
),
),
),
)
],
) );
},
),
));
}
I'm tried to find error with documentation, but...
Column and Listview take the maximum available height. therefore, the height of Listview which here is a child of Column should be constrained. You can do so by wrapping your ListView inside Expanded:
child: Column(
children: [
Expanded(
child: ListView(
Also, if your list is long, it is not recommended to set shrinkwrap to true. Because it makes the ListView to load all its items when the layout gets built. So it can slow down performance.
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _writePost,
tooltip: 'Increment',
child: Icon(Icons.create, color: Colors.grey[300]),
),
body: SizedBox(
height: MediaQuery.of(context).height*0.8, // add this line
child:
// Container( // do not need this
// child: // and this do not need
// Column(children: [ // and this do not need
StreamBuilder<List<Post>>(
initialData: const [],
stream: _socketStream.stream,
builder: (context, snapshot) {
if (_isLoading) {
return const Center(
child: CircularProgressIndicator(),
);
}
ListView( // change this to ListView.builder for more performance
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
...snapshot.data!.map<Widget>(
(post) => Padding(
key: ValueKey(post.id),
padding: const EdgeInsets.symmetric(vertical: 10),
child: ListTile(
title: Text(
post.content,
style: const TextStyle(fontSize: 20),
),
trailing: MaterialButton(
onPressed: () {
_deletePost(post.id);
},
child: const Icon(
Icons.delete,
size: 30,
),
),
),
),
)
],
);## Heading ##
},
),
// ]) // comment this
// ). // and comment this
)
);
}

Single card is not single

I'm trying to make posts like on Twitter, where every post is a single separated item, but they all go like big single card, without separating. I'm kinda new with Flutter and bad at explanations, but I hope u got it.
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _writePost,
tooltip: 'Increment',
child: Icon(Icons.create, color: Colors.grey[300]),
),
body: SizedBox(
height: 500,
child:
StreamBuilder<List<Post>>(
initialData: const [],
stream: _socketStream.stream,
builder: (context, snapshot) {
if (_isLoading) {
return const Center(
child: CircularProgressIndicator(),
);
}
return Card(child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
...snapshot.data!.map<Widget>(
(post) => Padding(
key: ValueKey(post.id),
padding: const EdgeInsets.symmetric(vertical: 10),
child: ListTile(
title: Text(
post.content,
style: const TextStyle(fontSize: 20),
),
trailing: MaterialButton(
onPressed: () {
_deletePost(post.id);
},
child: const Icon(
Icons.delete,
size: 30,
),
),
),
),
)
],
) );
},
),
));
}
Example of how it looks:
I'm tried to find error with documentation, but...
Write if u need some more code or explanations.
Please help me if you can <3
You need to add each of the mapped item of your data with Card instead of your parent ListView. Something like this:
return ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
...snapshot.data!.map<Widget>(
(post) => Padding(
key: ValueKey(post.id),
padding: const EdgeInsets.symmetric(vertical: 10),
child:
// Use card here.
Card(child: ListTile(
title: Text(
post.content,
style: const TextStyle(fontSize: 20),
),
trailing: MaterialButton(
onPressed: () {
_deletePost(post.id);
},
child: const Icon(
Icons.delete,
size: 30,
),
),
),
),
),
)
],
);
You can try ListView.separated
Try:
List.generate(lentgh, (index) {
return Text("$index"); // custom widget
}),

Flutter: Using Infinite Scroll ListView Horizontally

I am using the flutter package infiniteListView in order to get a horizontal list of infinitely scrolling list of days that users can click on.
This is the following error I am getting
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
When a column is in a parent that does not provide a finite height constraint, for example
if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting aflex
on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
space in the vertical direction.
Here is my code
Widget build(BuildContext context) {
return Container(
// Leave margin here for top bar
color: Colors.grey[900],
padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 5.0),
child: (Column(children: [
Expanded(
child: InfiniteListView.builder(
scrollDirection: Axis.horizontal,
controller: _infiniteController,
anchor: 0.5,
itemBuilder: (BuildContext context, int index) {
return Material(
child: InkWell(
onTap: () {},
child: ListTile(
title: Text('Item #$index'),
subtitle: Text('Subtitle $index'),
trailing: const Icon(Icons.chevron_right),
),
),
);
}),
),
])));
}
Solution 1:
Column has Unbounded Constriants (Infinite Height). Wrap your
InfiniteLiewView into a SizedBox(height 300: child:
//InfiniteListView);
Solution 2:
If that does not work, Pass shrinkWrap: true to InfiniteLiewView,
Solution 3:
Wrap you Column into a SizedBox(height 400, child: //code) .
Try this out, Let me know then.
wrap your ListTile with Fixed width, ListTile by default takes full width(something like double.infinity). also our Axis.horizontal, will take double.infinity, and this is where errors come.
Widget build(BuildContext context) {
return Scaffold(
body: Container(
// Leave margin here for top bar
color: Colors.grey[900],
padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 5.0),
child: (Column(mainAxisSize: MainAxisSize.min, children: [
Expanded(
child: InfiniteListView.builder(
// itemCount: 222,
scrollDirection: Axis.horizontal,
controller: _infiniteController,
anchor: 0.5,
itemBuilder: (BuildContext context, int index) {
return Material(
child: InkWell(
onTap: () {},
child: SizedBox(
width: 100,
child: ListTile(
title: Text('Item #$index'),
subtitle: Text('Subtitle $index'),
trailing: const Icon(Icons.chevron_right),
),
),
),
);
},
),
),
])),
),
);
}

Listview not showing inside a Row in Flutter

I am trying to show a listview after some texts in a column. The text shows properly inside the first Row until I add a listview inside the next row. Everything disappears after adding the ListView.
Here is the Code:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
"Prayer Time",
style: TextStyle(fontSize: 20, fontWeight:
FontWeight.normal),
),
],
),
Row(
children: <Widget>[myList()],
),
],
),
),
floatingActionButton: FloatingActionButton(
tooltip: 'Add Alarm',
child: Icon(Icons.add),
backgroundColor: const Color(0xff0A74C5),
),
);
}
Expanded myList() {
return Expanded(
child: ListView.builder(
itemBuilder: (context, position) {
return Card(
child: Text(androidVersionNames[position]),
);
},
itemCount: androidVersionNames.length,
)
);
}
}
change like this:
Expanded(
child: Row(
children: <Widget>[myList()],
),
),
Your ListView should have a fixed Size. Try to wrap the ListView inside a Container.
I run your code and fixed it. Replace your myList() with this code bellow:
Expanded myList() {
return Expanded(
child: Container(
width: double.infinity,
height: 200,
child: ListView.builder(
itemBuilder: (context, position) {
return Card(
child: Text(androidVersionNames[position]),
);
},
itemCount: androidVersionNames.length,
),
)
);
}

Flutter Gridview or StaggeredGridview variable width /variable number of items to fill column

I am trying to display a gridview that has variable number and width buttons like this:
But what I have ended up with when trying gridview is a fixed number of buttons and fixed widths like this:
Initially I thought this was a problem with the buttons having too much padding by default but that is not the issue, I was able to fix that and still have the same issue with the grid.
I have tried Gridview builder like this:
GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 3.5, mainAxisSpacing: 4, crossAxisSpacing: 4),
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () {
//Navigator.of(context).pushNamed(HomePageResultsScreen.id);
},
child: ButtonTheme(
minWidth: 16,
height: 30,
child: RaisedButton(
padding: EdgeInsets.all(8.0),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
color: Colors.white,
child:
Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
CachedNetworkImage(fit: BoxFit.contain,
height: 40,
width: 40,
placeholder: (context, url) => new CircularProgressIndicator(),
imageUrl: snapshot.data.documents[index]['icon'].toString(),
),
Text(snapshot.data.documents[index]['name'].toString(), textAlign: TextAlign.right, style: TextStyle(fontSize: 10, color: Colors.black,),),
],
),
),
onPressed: (){
},
),
),
);
},
itemCount: snapshot.data.documents.length,
);
I have also edited the attributes of the builder to haveSliverGridDelagateWithMaxCrossAxisExtent and other attributes. I know the buttons as they are if not placed inside the grid will shrink to minimum size but when in the grid they expand to fill up the whole column.
I have also tried numerous ways by replacing the gridview with a staggered gridview like this:
StaggeredGridView.countBuilder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 3,
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 1),
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () {
//Navigator.of(context).pushNamed(HomePageResultsScreen.id);
},
child: ButtonTheme(
minWidth: 16,
height: 30,
child: RaisedButton(
padding: EdgeInsets.all(8.0),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
color: Colors.white,
child:
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
CachedNetworkImage(fit: BoxFit.contain,
height: 20,
width: 20,
placeholder: (context, url) => new CircularProgressIndicator(),
imageUrl: snapshot.data.documents[index]['icon'].toString(),
),
Text(snapshot.data.documents[index]['name'].toString(), textAlign: TextAlign.center, style: TextStyle(fontSize: 10, color: Colors.black,),),
],
),
onPressed: (){
},
),
),
);
},
itemCount: snapshot.data.documents.length,
),
I have tried both StaggeredGridView.countBuilder and StaggeredGridView.extent but both of these are even further from what I imagined. It just ends up with a single button per gridview row (looks like a listview).
I am not sure what I am doing wrong or if this is even possible with these widgets.
Thanks for your help
you have to use StaggeredGridView and you have to find logic to calculate an item width and set StaggeredTile.count.
final List<String> testing = ['Baby Foods', 'Confectionery', 'Coffee', 'Packets & Units','Packets & Units unis', 'Processed Cheese', 'Factional Care', 'Sauce', 'Sauc'];
Container(
width: width,
child: StaggeredGridView.countBuilder(
itemCount: resting.length,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 8,
staggeredTileBuilder: (int index) {
if (testing[index].length < 5) {
return StaggeredTile.count(2, 1);
} else if (testing[index].length < 16) {
return StaggeredTile.count(3, 1);
} else {
return StaggeredTile.count(4, 1);
}
},
mainAxisSpacing: 12.0,
crossAxisSpacing: 10.0,
itemBuilder: (BuildContext context, int index) {
return TextButton(
child: Text(testing[index]),
onPressed: () {},
);
},
),
),
# # Staggered View
# ScreenShot
![alt text](https://github.com/Anup2712/flutterAnup/blob/master/StaggeredView/Screenshot.jpg)
# What is it?
A Flutter staggered grid view which supports multiple columns with rows of varying sizes.
It’s a grid layout where the cross axis is divided in multiple equally sized parts, and places elements in optimal position based on available main axis space.
You’ve probably came across some app or website design with staggered grid layout like Pinterest:
# For understand the code
To help you to understand the code, you can see that this grid of 10 tiles is divided into 4 columns:
![alt text](https://github.com/Anup2712/flutterAnup/blob/master/StaggeredView/understanding.png)
# Let's Get Started
<H3>1 - Depend on it</h3>
<h6><b>Add it to your package's pubspec.yaml file</b></h6>
<pre>dependencies:
fl_chart: ^0.6.1</pre>
<H3>2 - Install it</h3>
<h6><b>Install packages from the command line</b></h6>
<pre>flutter packages get</pre>
<H3>2 - Getting Started</h3>
<h6><b>Import the package:</b></h6>
<pre>import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';</pre>
<pre>import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:ofsdp/pages/home.dart';
import 'package:ofsdp/util/appdrawer.dart';
class AdministrativeUvit extends StatefulWidget {
#override
_AdministrativeUvitState createState() => _AdministrativeUvitState();
}
class _AdministrativeUvitState extends State<AdministrativeUvit> {
var _scaffoldkey = GlobalKey<ScaffoldState>();
List<StaggeredTile> _staggeredTiles = const <StaggeredTile>[
const StaggeredTile.count(1, 1),
const StaggeredTile.count(1, 1),
const StaggeredTile.count(1, 1),
const StaggeredTile.count(1, 1),
const StaggeredTile.count(1, 1.5),
const StaggeredTile.count(1, 1.5),
];
List<Widget> _tiles = const <Widget>[
const _Example01Tile(Colors.green, Icons.widgets),
const _Example01Tile(Colors.lightBlue, Icons.wifi),
const _Example01Tile(Colors.amber, Icons.panorama_wide_angle),
const _Example01Tile(Colors.brown, Icons.map),
const _Example01Tile(Colors.deepOrange, Icons.send),
const _Example01Tile(Colors.indigo, Icons.airline_seat_flat),
const _Example01Tile(Colors.red, Icons.bluetooth),
const _Example01Tile(Colors.pink, Icons.battery_alert),
const _Example01Tile(Colors.purple, Icons.desktop_windows),
const _Example01Tile(Colors.blue, Icons.radio),
];
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Image.asset(
"assets/images/footer.jpg",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Color.fromRGBO(117, 80, 0, 1),
title: const Text("ADMINISTRATIVE UNIT"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.home),
onPressed: () {
Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
)
],
),
drawer: AppDrawer(),
key: _scaffoldkey,
body: new Padding(
padding: const EdgeInsets.only(top: 12.0),
child: new StaggeredGridView.count(
crossAxisCount: 2,
staggeredTiles: _staggeredTiles,
children: _tiles,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
padding: const EdgeInsets.all(4.0),
)))
],
);
}
}
class _Example01Tile extends StatelessWidget {
const _Example01Tile(this.backgroundColor, this.iconData);
final Color backgroundColor;
final IconData iconData;
#override
Widget build(BuildContext context) {
return new Card(
color: backgroundColor,
child: new InkWell(
onTap: () {},
child: new Center(
child: new Padding(
padding: const EdgeInsets.all(4.0),
child: new Icon(
iconData,
color: Colors.white,
),
),
),
),
);
}
}</pre>
If these containers are not buttons (mean you don't need to click on each of them to do specific something) then you can use Wrap Widget
https://www.youtube.com/watch?v=z5iw2SeFx2M
https://medium.com/flutter-community/flutter-wrap-widget-e1ee0b005b16