Related
The error occurs in a screen where I am trying to render a list of contributions. I have tried a number of things (listed below), none of which works.
Wrapping my column widget with Expanded()
Wrapping my Column widget with Flexible()
Wrapping my Listview.builder() with SingleScrollView() then adding physics: NeverScrollableScrollPhysics() in it.enter image description here
I have a contributions screen with contains a Lisview.builder()
This is my contributions screen
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Chamas'),
centerTitle: true,
),
floatingActionButton: CustomFloatingActionButton(
buttonLabel: 'Contribute +',
),
resizeToAvoidBottomInset: false,
body: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.22,
margin: EdgeInsets.only(top: 20),
child: PageView.builder(
itemCount: widget.availableChamas.length, // number of cards
controller: PageController(viewportFraction: 0.8),
onPageChanged: (int index) => setState(() => _index = index),
/*** Begin snapping chama cards */
itemBuilder: (_, i) {
return Transform.scale(
scale: i == _index ? 1 : 0.9,
child: Card(
elevation: 6,
margin: EdgeInsets.only(right: 0),
color: Theme.of(context).primaryColor, // Card backgound color
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
stops: [0.1, 0.9],
colors: [Colors.indigo, Colors.teal],
),
),
child: ChamaCard(
id: widget.availableChamas[i].id,
name: widget.availableChamas[i].name,
totalMembers: widget.availableChamas[i].totalMembers,
totalContributions: widget.availableChamas[i].totalContributions,
),
),
),
);
/*** End snapping chama cards */
},
),
),
SizedBox(height: 15),
Container(
padding: EdgeInsets.only(right: 15, left: 15),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'All my chamas',
style: TextStyle(fontSize: 15, color: Colors.red[900]),
),
Icon(
Icons.arrow_forward,
size: 17,
color: Colors.red[900],
)
],
),
SizedBox(height: 15),
Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('My', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
'Contributions',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
SizedBox(width: 5),
Text(
'to this chama',
style: TextStyle(color: Colors.green[800]),
)
],
),
],
)
],
),
SizedBox(height: 10),
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return ChamaListItem(
id: widget.availableContributions[index].id,
amount: widget.availableContributions[index].amount,
contributionDate: widget.availableContributions[index].contributionDate,
);
},
itemCount: widget.availableContributions.length,
),
],
),
)
],
),
);
}
This is my ChamaListItem widget which simply holds a single contribution card. This is what I am iterating to build a scrollable list in my Listview.builder()
Widget build(BuildContext context) {
return Card(
elevation: 4,
shadowColor: Color.fromRGBO(255, 255, 255, 0.5),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Date',
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 5),
Text(
'$contributionDate',
style: TextStyle(color: Colors.red[900]),
)
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text('Kes'),
SizedBox(width: 1),
Text(
'$amount',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
),
],
)
],
),
),
);
}
This is the error thrown in the console
Performing hot reload...
Syncing files to device sdk gphone x86 arm...
Reloaded 5 of 566 libraries in 1,183ms.
======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 283 pixels on the bottom.
The relevant error-causing widget was:
Column file:///Users/Steve/StudioProjects/m_chama/lib/screens/myChamas.dart:35:13
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.
The specific RenderFlex in question is: RenderFlex#3a382 relayoutBoundary=up1 OVERFLOWING
... needs compositing
... parentData: offset=Offset(0.0, 105.5); id=_ScaffoldSlot.body (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=697.5)
... size: Size(392.7, 697.5)
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
====================================================================================================
Wrap Column widget with SingleChiledScrollView
I'm trying to make comment card.
There is one problem.
My avatar and button are not fixed when comment height is growing
I want avatar image and button's position fixed.
How can I make this ?
import 'package:flutter/material.dart';
import '../../size_config.dart';
class CommentItem extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Row(
children: <Widget>[
CircleAvatar(
radius: 25,
child: ClipOval(
child: SizedBox(
height: 1000,
width: 1000,
child: Image.asset(
'assets/images/img2.jpg',
fit: BoxFit.cover,
),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('123',
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 17)),
SizedBox(height: 3),
Text(
'. If you want to keep these changes, it is re',
style: TextStyle(color: Colors.grey),
maxLines: 4,
),
],
),
),
),
ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(
width: SizeConfig.widthMultiplier * 8.8,
height: SizeConfig.heightMultiplier * 5,
child: Icon(
Icons.person_add,
size: SizeConfig.imageSizeMultiplier * 5.5,
color: Colors.white,
)),
onTap: () {},
),
),
)
],
),
);
}
}
it looks like your post is mostly code; please add some more details
it looks like your post is mostly code; please add some more details
it looks like your post is mostly code; please add some more details
To achieve this you can make use of Row's crossAxisAlignment property it will arrange the widget inside the row respectively
For Center -
crossAxisAlignment: CrossAxisAlignment.center
For Top -
crossAxisAlignment: CrossAxisAlignment.start,
For Bottom -
crossAxisAlignment: CrossAxisAlignment.end,
Did you try using the crossAxisAlignment?
Row(
crossAxisAlignment: CrossAxisAlignment.start,
You can do it using...
crossAxisAlignment: CrossAxisAlignment.start
For this, you can use the Alignment Property of Row
There is two alignment property in Row:
MainAxisAlignment
CrossAxisAlignment
MainAxisAlignment is used for Horizontal Alignment of Widgets and CrossAxisAlignment is used for Vertical Alignment.
In your case you need to set:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
I'm getting the problem when I add Scrolling functionality in Scaffold, here I have tried SingleChildScrollView, CustomerScrollView, and ListView but it freezes the UI but when I replaced ti Scaffold to LayoutBuilder it works but all the background my UI got black.
I just want to add scrolling functionally to Scaffold.
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () {
...Some Code...
},
child: Scaffold(
body: Column(
children: <Widget>[
Expanded(
flex: 3,
child: Container(
padding: EdgeInsets.all(15.0),
alignment: Alignment.bottomLeft,
child: Text(
mydata[0][i.toString()],
style: TextStyle(fontSize: 16.0, fontFamily: "Quando"),
),
)),
Expanded(
flex: 6,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
choiceButton('a'),
choiceButton('b'),
choiceButton('c'),
choiceButton('d'),
],
),
)),
Expanded(
flex: 1,
child: Container(
alignment: Alignment.topCenter,
child: Text(showtimer,
style: TextStyle(
fontSize: 35.0,
fontFamily: "Times New Roman",
fontWeight: FontWeight.w700)),
))
],
),
) // Scaffold
);// WillPopScope
}
Try This
return Scaffold(
resizeToAvoidBottomInset: false,
extendBodyBehindAppBar: false,
backgroundColor: Colors.white,
body: Column(
children: <Widget>[
Expanded(
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
],
),
),
),
),
]
Don't use Expanded inside any scrolling container unless you wrap it in a fixed bound on its main axis.
Like in your case main axis is vertical and you are using expanded in it, since expanded needs a bound to limit its expansion, you should've remove that expanded thing or just wrap the container in a SizedBox for a specific height.
Than you can wrap the sized box in any scroll container which suits you.
Hope it helps!
In your code, change Column to ListView, and remove the expanded widget. you can use fixed height or MediaQuery.of(context).size.height * (any ratio) to the containers, or just don't specify any container height so it'll take its children's height.
here's the code will look like:
body: ListView(
shrinkWrap: true,
children: <Widget>[
Container(
// height: MediaQuery.of(context).size.height * (any ratio) / fixed height
child: Text(
mydata[0][i.toString()],
style: TextStyle(fontSize: 16.0, fontFamily: "Quando"),
),
),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
choiceButton('a'),
choiceButton('b'),
choiceButton('c'),
choiceButton('d'),
],
),
),
Container(
alignment: Alignment.topCenter,
child: Text(showtimer,
style: TextStyle(
fontSize: 35.0,
fontFamily: "Times New Roman",
fontWeight: FontWeight.w700)),
)
],
),
I have a row in Flutter with two widgets. I'm trying to keep the first widget centered in the middle of the screen and the second widget forced to the far right of the screen.
I've tried using Spacer(). This results in the app returning a blank screen.
I've also tried using Expanded. This sends the second widget off the screen completely.
Trying mainAxisAlignment: MainAxisAlignment.spaceBetween did not seem to have any effect.
#override
Widget build(BuildContext context) {
return new Container(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Container(
child: new GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: Column(
children: <Widget>[
SizedBox(height: 40.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Column(
children: <Widget>[
new Container(
child: Row(
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(),
Container(
child: Text(
'Profile',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Lato',
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.w700,
),
),
),
Container(
child: IconButton(
icon: Icon(
Icons.settings,
color: Colors.white,
size: 30.0,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => OnBoarding()),
);
}),
),
]),
),
),
],
),
],
),
You can use a Row with an Expanded child that contains a Stack. Centre your text with Center and position the icon with Positioned, like so:
[...]
child: Column(
children: <Widget>[
SizedBox(height: 40.0),
Row(
children: <Widget>[
Expanded(
child: Stack(
children: [
Center(
child: Text(...),
),
),
Positioned(
right: 8,
child: IconButton(...),
[...]
Simply just add Spacer() between your main text and the Icon you want to the far right.
For example:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {},
),
Text(
'Random test text',
style: TextStyle(color: Colors.white),
),
Spacer(),
IconButton(
icon: Icon(Icons.more_vert_rounded),
color: Colors.white,
onPressed: () {},
),
],
)
I hope this helps you. And I hope the format of the code is readable. Still getting a hang of stackoverflow comments
I did this and worked in my project
child:Row(
**crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end,**
children: [
Icon(MaterialCommunityIcons.comment_outline),
Text("0"),
Icon(Icons.favorite_border),
Text("0"),
],
),
I needed align Icons and Text at right in Row widget
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end
children: [ // put your widget list and be happy ]
)
)
enter image description here
Use a row with this following structure:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(),
Container(
child: Text(
'Profile',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Lato',
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.w700,
),
),
),
Container(
child: IconButton(
icon: Icon(
Icons.settings,
color: Colors.white,
size: 30.0,
),
),
),
]
),
what will happen is that the spaceBetween property will divide available space equally between the widgets in the row, so I put an empty Container, and this will force the Text widget to be in the middle of the row and the IconButton in the far end as you desire.
I noticed in your code snippet that you have a Column with a single Row which again contains a single Column , you should eliminate this redundancy to optimize your code and make it easier to debug:
Have you tried setting the mainAxisAlignment of the row to mainAxisAlignment.center?
Imo the easiest way to do this is to create a row with 2 children: The first child is an Expanded Row with all your "main" widgets. The second child is your widget which must be aligned to the end.
Row(
children: [
Expanded(
child: Row(
children: [...mainWidgets...],
),
),
...endWidget...
],
),
Note that Expanded is space-greedy. If you use e.g. MainAxisAlignment.center for your Expanded Row, then your children are drawn across the whole avialable width. If this is not to your liking, Id suggest to wrap the Expanded-Row (not Expanded) inside a Container with "constraints: BoxConstraints(maxWidth: 500)". Obviously Expanded shouldnt be Constrained.
Achieve using Expanded & Align like below inside Row:
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
...some other widgets,
Expanded(
//Expanded will help you to cover remaining space of Row
flex: 1,
child: Align(
//Align with alignment.centerRight property will move the child to righteous inside Expanded
alignment: Alignment.centerRight,
child: const Icon(Icons.arrow_back),
),
),
],
),
Note, the Expanded has to be just inside the Row children: <Widget>[],
othewise suppose you've put the GestureDetector inside Row children: <Widget>[], and inside GestureDetector you have put your Expanded, then it won't
work.
Hope this would help many one.
In Flutter, is there an option to draw a vertical lines between components as in the image.
Not as far as I know. However, it is quite simple to create one — if you look at the source for Flutter's Divider you'll see that it is simply a SizedBox with a single (bottom) border. You could do the same but with dimensions switched.
Update (Oct 4, 2018): a VerticalDivider implementation has been merged in by the Flutter team. Check out the docs but it's very simple to use — simply put it between two other items in a row.
Note: If you are using VerticalDivider as separator in Row widget then wrap Row with IntrinsicHeight , Container or SizedBox else VerticalDivider will not show up. For Container and SizedBox widget you need define height.
As of 10 days ago, flutter has merged a VerticalDivider implementation. It will be available in the default channel very soon, but for now you have to switch to the dev channel to use it: flutter channel dev.
Here is a example of how to use it:
IntrinsicHeight(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Foo'),
VerticalDivider(),
Text('Bar'),
VerticalDivider(),
Text('Baz'),
],
))
Vertical divider:
As a direct child:
VerticalDivider(
color: Colors.black,
thickness: 2,
)
In a Row:
IntrinsicHeight(
child: Row(
children: [
Text('Hello'),
VerticalDivider(
color: Colors.black,
thickness: 2,
),
Text('World'),
],
),
)
Horizontal divider:
As a direct child:
Divider(
color: Colors.black,
thickness: 2,
)
In a Column:
IntrinsicWidth(
child: Column(
children: [
Text('Hello'),
Divider(
color: Colors.black,
thickness: 2,
),
Text('World'),
],
),
)
import 'package:flutter/material.dart';
class VerticalDivider extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Container(
height: 30.0,
width: 1.0,
color: Colors.white30,
margin: const EdgeInsets.only(left: 10.0, right: 10.0),
);
}
}
Try to wrap it inside the Container with some height as
Container(height: 80, child: VerticalDivider(color: Colors.red)),
Tried with VerticalDivider() but cannot get any divider. I Solved it with
Container(color: Colors.black45, height: 50, width: 2,),
You can use a vertical divider with a thickness of 1.
VerticalDivider(
thickness: 1,
color: Color(0xFFF6F4F4),
),
And if you can't see the vertical divider wrap the row with a IntrinsicHeight widget.
Just wrap your Row in IntrinsicHeight widget and you should get the desired result:
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Name'),
VerticalDivider(),
Text('Contact'),
],
))
As #rwynnchristian suggested, this seems to be the simplest solution IMO. Just leaving the code here:
import 'package:flutter/material.dart';
class VerticalDivider extends StatelessWidget {
#override
Widget build(BuildContext context) => RotatedBox(
quarterTurns: 1,
child: Divider(),
);
}
add this method anywhere.
_verticalDivider() => BoxDecoration(
border: Border(
right: BorderSide(
color: Theme.of(context).dividerColor,
width: 0.5,
),
),
);
now wrap your content in container
Container(
decoration: _verticalDivider(),
child: //your widget code
);
Use Container for divider is easy, wrap your row in IntrinsicHeight()
IntrinsicHeight(
child: Row(
children: [
Text(
'Admissions',
style: TextStyle(fontSize: 34),
),
Container(width: 1, color: Colors.black), // This is divider
Text('another text'),
],
),
You need to wrap VerticalDivider() widget with the IntrinsicHeight widget. Otherwise, the vertical divider will not show up. And to gain some padding over the top and bottom you can add indent.
IntrinsicHeight(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: VerticalDivider(
thickness: 0.8,
color: Colors.grey,
),
),
Flexible(
child: Text(
"Random Text",
style: TextStyle(
fontSize: 12,
color: AppColor.darkHintTextColor,),
),
),
],
),
)
I guess i found a more robust solution when dealing with this problem;
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(borderRadius: BoxRadius.circular(),color: Colors.gray),
height: 5,
margin: CustomPaddings.horizontal(),
),
),
Text(
"TEST",
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(
color: Colors.black,
fontWeight: FontWeight.bold),
),
Expanded(
child: Container(
decoration: BoxDecoration(borderRadius: BoxRadius.circular(),color: Colors.gray),
height: 5,
margin: CustomPaddings.horizontal(),
),
),
],
),
),
Try RotatedBox in combination with a divider to get it vertical, RotatedBox is a widget of flutter that automatically rotates it's child based on the quarterTurn property you have to specify. Head over to here for a detailed explanation https://docs.flutter.io/flutter/widgets/RotatedBox-class.html