Flutter Renderflex Puzzle - flutter

I've been trying to solve this for 2 days. I think I've tried every combo, and read through 100 tutorials on here. No matter what I do, I keep getting the same error. One of my columns keeps overflowing. I've marked it with a comment.
The problematic column is inside of AlignedGridView, which is gridview builder like listview. Since this doesn't have a defined height, it keeps throwing the error. I've tried wrapping it in an expanded widget, but that doesn't work.
I'm trying not to define a height because it makes the design look ugly.
If there are any Flutter layout wizards out there who can help, I'm all ears!
Chris
class SoundscapesGrid extends StatefulWidget {
const SoundscapesGrid({
Key? key,
this.width,
this.height,
this.soundscapesList,
}) : super(key: key);
final double? width;
final double? height;
final List<SoundscapesRecord>? soundscapesList;
#override
_SoundscapesGridState createState() => _SoundscapesGridState();
}
class _SoundscapesGridState extends State<SoundscapesGrid> {
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (responsiveVisibility(
context: context,
phone: false,
))
Expanded(
flex: 1,
child: Container(
width: 100,
decoration: BoxDecoration(),
),
),
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsetsDirectional.fromSTEB(0, 0, 0, 30),
child: AlignedGridView.count(
crossAxisCount: 2,
mainAxisSpacing: 50,
crossAxisSpacing: 20,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: widget.soundscapesList!.length,
itemBuilder: (context, index) {
return InkWell(
onTap: () async {
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SoundscapePageWidget(
soundscapeImageUrl: widget
.soundscapesList![index].soundscapeImageUrl,
soundscapeName: widget
.soundscapesList![index].soundscapeName,
soundscapeDescription: widget
.soundscapesList![index]
.soundscapeDescription,
soundscapeUid:
widget.soundscapesList![index].uid,
),
),
);
},
/*THIS IS WHERE IT'S OVERFLOWING*/ child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(
0, 0, 0, 5),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
widget.soundscapesList![index]
.soundscapeImageUrl!,
width:
MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
),
),
),
],
),
Row(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(
0, 10, 0, 5),
child: Text(
widget.soundscapesList![index]
.soundscapeName!,
style: FlutterFlowTheme.of(context)
.title3),
),
),
],
),
Row(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Text(
widget.soundscapesList![index]
.soundscapeDescription!,
style: FlutterFlowTheme.of(context)
.bodyText2),
),
],
),
],
),
);
},
),
),
),
if (responsiveVisibility(
context: context,
phone: false,
))
Expanded(
flex: 1,
child: Container(
width: 100,
decoration: BoxDecoration(),
),
),
],
),
const SizedBox(height: 20),
],
),
);
}
}

Related

I made customize horizontal stepper in flutter and it's not scrolled till the end

Does anyone know how to make my stepper scrollable in vertically, it actually could scroll but it doesn't scrolling till the end of the page length
The stepper:
MainScaffold(
title: appBarTitle,
body: Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
width: width,
child: Column(
children: <Widget>[
const SizedBox(
height: 8,
),
Row(
children: _lineViews(),
),
const SizedBox(
height: 8,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _titleViews(),
),
const SizedBox(
height: 20,
),
Expanded(
child: ListView(
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: stepPanels())
],
),
),
const SizedBox(
height: 20,
),
],
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: _buttonControls(currentStep, context),
);
I put the stepper's content inside expanded listview, and I already add shrinkwrap & physics into it, when I call this customizable widget on another class, it can't be scrolled till the end of the page
Steps(
content: Obx(
() {
if (controller.loading.value) {
return const LoadingProgressIndicator();
} else {
return SizedBox(
height: MediaQuery.of(context).size.height,
child: ListView(
physics: const ClampingScrollPhysics(),
children: [
controller.loading.value
? const LoadingProgressIndicator()
: _doctorProfile(),
const SizedBox(height: 10.0),
const ClinicTypeToggle(),
const SizedBox(height: 100.0),
],
),
);
}
},
),
),
that is the content that I want to scroll

Flutter Can't create a Listview to fill height but only have fixed width

I can't work this out. It should be really simple. (This is Flutter Desktop)
I want a Row with 2 columns. The first column should be full height available but only 200 wide. Column 2 should be full height and use the remainder of the width.
I have tried all sorts but always get an overflow rather than a scrollable list.
What am I doing wrong?
This is the last iteration of my code.
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Bnode Management'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('This is the title'),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Container(
width: 200,
child: ListView.builder(
shrinkWrap: true,
itemCount: piItems.length,
itemBuilder: (BuildContext context, int index) {
return Container(width: 40, color: Colors.red, child: Text(piItems[index].id));
}),
),
),
Container(color: Colors.blue, child: const Text('Column 1')),
],
),
],
),
);
}
}
The second Column like to have max space, therefor we can use Expanded on it instead of using on 1st Column. Also, the Row is needed to have max height. For this, we will wrap this Row with Expanded.
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('This is the title'),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 200,
child: ListView.builder(
shrinkWrap: true,
itemCount: piItems.length,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 40,
color: Colors.red,
child: Text(piItems[index].id));
}),
),
Expanded(
child: Container(
color: Colors.blue,
child: Column(
children: [
const Text('Column 1'),
],
),
),
)
],
),
),
],
),
I also prefer using LayoutBuilder on body in this case.
You almost got it right, just mixed some things. Let's go step by step.
I want a Row with 2 columns
Ok, that's just a Row with two children.
Row(
children: [child1, child2],
)
The first column should be full height available but only 200 wide.
It would take the full height automatically but I see that in your code example you have a Column with Text title, so we should wrap our Row with Expanded. Also, the first Column should take 200 px.
Column(
children: [
const Text('This is the title'),
Expanded(
child: Row(
children: [
Container(
width: 200,
child: child1,
),
child2,
],
),
),
],
)
Column 2 should be full height and use the remainder of the width.
So we wrap our 2nd child with Expanded inside the Row.
Column(
children: [
const Text('This is the title'),
Expanded(
child: Row(
children: [
Container(
width: 200,
child: child1,
),
Expanded(
child: child2,
),
],
),
),
],
)
The end result based on your code:
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Bnode Management'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('This is the title'),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 200,
child: ListView.builder(
shrinkWrap: true,
itemCount: piItems.length,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 40,
color: Colors.red,
child: Text(piItems[index].id));
},
),
),
Expanded(
child: Container(
color: Colors.blue,
child: const Text('Column 1'),
),
),
],
),
),
],
),
);
}
}

Horizontal viewport was given unbounded height - Flutter

I'm a newbie in App development and encountering an error while rendering the Horizontal Card scroll.
howItWorks.dart
class HowItWorksCards extends StatefulWidget {
HowItWorksCards();
#override
_HowItWorksCardsState createState() => _HowItWorksCardsState();
}
class _HowItWorksCardsState extends State<HowItWorksCards> {
int _currentPage = 0;
PageController _pageController = PageController(viewportFraction: 0.8, keepPage: true);
List<Widget> _pages = [
SliderPage(
index: 1,
title: "Title1",
info:"Summary",
image: "assets/images/howItWorks/1.png"),
SliderPage(
index: 1,
title: "Title1",
info:"Summary",
image: "assets/images/howItWorks/1.png"),
SliderPage(
index: 1,
title: "Title1",
info:"Summary",
image: "assets/images/howItWorks/1.png"),
];
_onchanged(int index) {
setState(() {
_currentPage = index;
});
}
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
flex: 5,
child: PageView.builder( // this throws the exception.
controller: _pageController,
// physics: BouncingScrollPhysics(),
scrollDirection: Axis.horizontal,
itemCount: _pages.length,
onPageChanged: _onchanged,
itemBuilder: (context, int index) {
return _pages[index];
},
),
),
Flexible( // this works absolutely fine when the above Flexible widget is commented.
flex: 4,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: List<Widget>.generate(
_pages.length,
(int index) {
return AnimatedContainer(
duration: Duration(milliseconds: 300),
height: 5,
width: (index == _currentPage) ? 30 : 10,
margin: EdgeInsets.symmetric(horizontal: 5, vertical: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: (index == _currentPage)
? AppTheme.globalTheme.primaryColor
: AppTheme.globalTheme.primaryColor
.withOpacity(0.5)));
},
)),
),
],
);
}
}
slider.dart
class SliderPage extends StatelessWidget {
final String image;
final int index;
final String title;
final String info;
SliderPage(
{#required this.image,
#required this.info,
#required this.title,
#required this.index});
#override
Widget build(BuildContext context) {
return Card(
elevation: 20,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.all(5.0),
height: 175,
child: Image.asset(
image,
fit: BoxFit.fitHeight,
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(left: 5),
child: Text(this.title,
style: getFontStyle(
bold: true,
color: Color(0xFF3C3C43),
fontSize: 18,
fontStyle: FontStyles.SFProDisplay),
textAlign: TextAlign.center),
),
],
),
),
Container(
padding:
const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5),
child: Text(
this.info,
style: getFontStyle(
color: Color(0xFF3C3C43),
fontSize: 16,
fontStyle: FontStyles.SFProDisplay),
textAlign: TextAlign.center,
),
),
]),
);
}
}
main.dart
void main() => runApp(MaterialApp(home: AmazonOrdersInvoiceOnboarding()));
class AmazonOrdersInvoiceOnboarding extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: GoBackAppBar(
customBackGroundColor: Color(0x1affb500),
title: "",
),
body: ListView(
shrinkWrap: true,
children: [
HowItWorksCards(),
],
),
);
}
}
I'm getting some exceptions.
Horizontal viewport was given unbounded height. - Have already used Flexible. Not sure why I'm still getting this exception.
RenderBox was not laid out: RenderViewport#c29be NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I found a lot of related questions on SO, but to no avail.
This error happen when we use infinite sized widget inside one-another,
here you are using Column inside ListView, both take infinite height, if you wrap Column fixed sized widget it will solve the problem,
And I strongly suggest you to watch this video by flutter
https://www.youtube.com/watch?v=jckqXR5CrPI
on howItWorks.dart
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
flex: 5,
child: Container(
height: 250,
child: PageView.builder(
// this throws the exception.
controller: _pageController,
// physics: BouncingScrollPhysics(),
scrollDirection: Axis.horizontal,
itemCount: _pages.length,
onPageChanged: _onchanged,
itemBuilder: (context, int index) {
return _pages[index];
},
),
),
),
Flexible(
// this works absolutely fine when the above Flexible widget is commented.
flex: 4,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: List<Widget>.generate(
_pages.length,
(int index) {
return AnimatedContainer(
duration: Duration(milliseconds: 300),
height: 5,
width: (index == _currentPage) ? 30 : 10,
margin: EdgeInsets.symmetric(horizontal: 5, vertical: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.amber)
// (index == _currentPage)
// ? AppTheme.globalTheme.primaryColor
// : AppTheme.globalTheme.primaryColor
// .withOpacity(0.5))
);
},
)),
),
],
);
}

Bottom overflow 13 pixels

How can fix it?
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
return Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
fit: StackFit.loose,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
flex: 2,
child: buildSearch(),
),
Expanded(
flex: 2,
child: Container(color: Colors.green),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Frequitly Visited'),
TextButton(
onPressed: () {},
child: Text('Show More'),
),
],
),
Expanded(
flex: 6,
child: buildSites(size),
)
],
)
],
),
);
}
buildSearch() {
return Container(
child: FloatingSearchBar(
transitionCurve: Curves.easeInOutCubic,
transition: CircularFloatingSearchBarTransition(),
physics: const BouncingScrollPhysics(),
scrollPadding: EdgeInsets.zero,
builder: (context, _) => _history(),
),
);
}
Container buildSites(size) {
return Container(
color: Colors.black,
width: size.width,
);
}
Widget _history() {
List<String> listHistory = [
'Flutter',
'Python',
'Nodejs',
'Rails',
];
return ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Material(
child: Column(
children: listHistory
.map((e) => ListTile(
title: Text(e),
onTap: () {},
))
.toList(),
),
),
);
}
}
try to fixed the height of search & container, expanded only flexible part:
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 100,
child: buildSearch(),
),
Container(
height: 100,
child: Container(color: Colors.green),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Frequitly Visited'),
TextButton(
onPressed: () {},
child: Text('Show More'),
),
],
),
Expanded(
child: buildSites(size),
)
],
)
You can just remove the Expanded widget wrapped around your buildSearch() widget and give a desired padding or you can also your sizedbox with a desiredHeight below and above the buildSearch()
so basically change
...
Expanded(
flex: 2,
child: buildSearch(),
),
...
to
...
Padding(
padding:EdgeInsets.only(top:20,bottom:50), // adding a suitable padding should fix it
child:buildSearch(),
)
...

Fill ListView tiles vertically by a container - Flutter

I have been trying to put a line indicator on the left most margin of the card in my flutter app. I've tried a lot of things but didn't work.
There's an exact question here, which is actually the same issue I've been trying to solve.
The problem with the accepted solution is that it restricts the height of the hardcoded value, which I don't want. Rather the color should automatically fill the height of the card.
The Problem
I've tried all the three solutions and none of them fit my use case.
Output from first solution
Here I've to hardcode the value to something larger so that all the text being displayed lies well inside it. That's something I feel is not a solution.
Card(
key: ObjectKey(noteList[index]),
elevation: 2.0,
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
width: 4,
color: Color(noteList[index].intcolor),
),
Flexible(
flex: 100,
child: ListTile(
~~~~~~~~~~~~~~~~~ SNIP ~~~~~~~~~~~~~~~~~~~~~~~~
chip goes outside
Output from Second solution
This doesn't show anything at all.
Card(
key: ObjectKey(noteList[index]),
elevation: 2.0,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
constraints: BoxConstraints.expand(),
color: Color(noteList[index].intcolor),
),
),
Flexible(
flex: 100,
child: ListTile(
~~~~~~~~~~~~~~~~~ SNIP ~~~~~~~~~~~~~~~~~~~~~~~~
No output at all
Output from last solution
There's no color from the container.
There's no color from the container
Thanks a lot.
Update 1 ( Monday, 6 April 2020 8:16 pm GMT )
Added code and repo for easy replication.
Repo
main.dart
import 'package:flutter/material.dart';
void main() {
List<String> notes = [
"fluttermaster.com",
"Update Android Studio to 3.3",
"Something long Something long Something long Something long Something long Something long",
];
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Simple Note ListView"),
),
body: Container(
color: Colors.white10,
padding: EdgeInsets.all(16.0),
child: HomePage(notes)),
),
));
}
class HomePage extends StatelessWidget {
final List<String> notes;
HomePage(this.notes);
Widget build(BuildContext context) {
return ListView.builder(
itemCount: notes.length,
itemBuilder: (context, pos) {
return Padding(
padding: EdgeInsets.only(bottom: 16.0),
child: Card(
elevation: 2.0,
child: Row(
// key: _cardKey,
children: <Widget>[
Flexible(
flex: 1,
child: Container(
// -------------------- This here ----------------------------------------------
// FixMe : This shouldn't be hardcoded, rather it should fill the height of it's parent element, in this case card
// https://medium.com/#diegoveloper/flutter-widget-size-and-position-b0a9ffed9407
height: 71,
color: Colors.green,
// -------------------- This here ----------------------------------------------
),
),
Flexible(
flex: 100,
child: ListTile(
// For center alignment from vertical and horizontal : https://stackoverflow.com/a/51546279
// Since using CircleAvatar does this but it decreases size of icon too : https://github.com/flutter/flutter/issues/16061
leading: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.receipt),
],
),
title: Text(
notes[pos],
),
subtitle: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(notes[pos].substring(0, 10)),
// What is the best way to optionally include a widget in a list of children
// https://github.com/flutter/flutter/issues/3783#issuecomment-506019822
if ((pos % 2) == 0)
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.grey.shade800,
child: Icon(Icons.timer),
),
label: Text('2FA'),
),
],
),
trailing: Padding(
padding: EdgeInsets.all(10),
child: Wrap(
spacing: 10,
direction: Axis.vertical,
alignment: WrapAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(
Icons.check,
color: Colors.grey,
),
onPressed: () {},
)
]),
),
onTap: () {},
),
),
],
),
));
},
);
}
}
Perhaps one way of doing it is to use Stack
ListView.builder(
itemCount: notes.length,
itemBuilder: (context, pos) {
return Padding(
padding: EdgeInsets.all(8),
child: Stack(
children: <Widget>[
Card(
margin: EdgeInsets.zero,
child: ListTile(
leading: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.receipt),
],
),
title: Text(
notes[pos],
),
subtitle: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(notes[pos].substring(0, 10)),
if ((pos % 2) == 0)
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.grey.shade800,
child: Icon(Icons.timer),
),
label: Text('2FA'),
),
],
),
trailing: Padding(
padding: EdgeInsets.all(10),
child: Wrap(
spacing: 10,
direction: Axis.vertical,
alignment: WrapAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(
Icons.check,
color: Colors.grey,
),
onPressed: () {},
)
]),
),
onTap: () {},
),
),
Positioned(
top: 0,
bottom: 0,
child: Container(
width: 5,
color: Colors.green,
),
)
],
),
);
},
)
Output