Wrap inside a row gets cut - flutter

So I have a column composed of rows, the column has a defined sized and each row takes the space it needs.
Each row is composed of 2 containers, the right container has a Wrap that wraps items of 50x50 size.
The problem is when there are more than 5 items, the next row gets cut.
class MyRow extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Expanded(
child: Padding(
padding: EdgeInsets.all(2),
child: Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
height: double.infinity,
color: Colors.orange,
child: FittedBox(
fit: BoxFit.contain,
child: Text("Title"),
)
),
),
Expanded(
flex: 6,
child: Container(
width: double.infinity,
height: double.infinity,
color: Colors.green,
child: Wrap(
children: <Widget>[
RowItem(),
RowItem(),
RowItem(),
RowItem(),
RowItem(),
RowItem(),
],
),
),
),
],
),
),
);
}
}
This is the main column:
class TestShare extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Padding(
padding: EdgeInsets.all(50),
child: AspectRatio(
aspectRatio: 16/9,
child: Container(
color: Colors.blueAccent,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MyRow(),
MyRow(),
MyRow(),
...
],
)
),
),
),
);
}
}

Related

Align children with first child in Column

How can I align my widget to take the same width as ClipRect image?
Right now it overflows in my screen. Find attached how it is and how I desire my output would be.
Is it possible to center it within the red lines I drew?
Widget build(BuildContext context) {
final mainChildKey = GlobalKey();
return Flexible(
child: Column(
children: <Widget>[
ColumnWithMainChild(
mainChildKey: mainChildKey,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
imgparam,
width: 350,
height: 200,
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(0, 8, 0, 8),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Text(
'Good with children: $param_good_children',
),
GFProgressBar(
width: 150,
percentage: 0.3,
backgroundColor: Colors.pink,
progressBarColor: Colors.red,
)
],
),
Divider(),
Text(
'Good with children: $param_good_children',
),
],
),
),
),
],
),
]));
}
}
Do the following Changes
Set Padding to Parent column
Set width of NetworkImage to double.infinity
Wrap your Progress Bar with Flexible
Code:
Widget build(BuildContext context) {
final mainChildKey = GlobalKey();
return Scaffold(
appBar: AppBar(),
body: Padding( // Set Padding to Paren
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
"https://images.unsplash.com/photo-1474922651267-219b23864ae8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80",
width: double.infinity, // Set width of NetworkImage to double.infinity
height: 200,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(0, 8, 0, 8),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
const Text(
'Good with children: 5',
),
Flexible( //Wrap your Progress Bar with Flexible
child: GFProgressBar(
width: 150,
percentage: 0.3,
backgroundColor: Colors.pink,
progressBarColor: Colors.red,
),
)
],
),
const Divider(),
const Text(
'Good with children: 5',
),
],
),
),
),
]),
),
);
}
Output:

Flutter layout within a card

Im trying to create the following layout within a flutter card within a list builder.. (colours are for display purpose only)
However, its ending up like :-
Ive tried multiple variations using Cross axis (Throws errors), stretch, Expanded etc, but unfortunately i'm not getting very far.
This is what i have so far :-
return Container(
child: Card(
margin: EdgeInsets.only(bottom: 20.0),
shape: ContinuousRectangleBorder(
side: BorderSide(
width: 1.0,
color: Colors.white10,
)),
elevation: 1.0,
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch, // add this
children: [
Image.memory(base64Decode(data[index].thumb_image),
// width: 300,
height: 150,
fit: BoxFit.fill),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
color: Colors.red,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Title',
textAlign: TextAlign.left,
),
Text('Description'),
],
),
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text('12hs 8mins'),
],
),
))
],
),
Text('1000')
],
),
),
),
);
Adding a container that encapsulates your red and blue widgets helps the case. I added a height of 50 on the container that encapsulates the widgets.
void main() {
runApp(
MaterialApp(
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Card(
margin: EdgeInsets.only(bottom: 20.0),
shape: ContinuousRectangleBorder(
side: BorderSide(
width: 1.0,
color: Colors.white10,
)),
elevation: 1.0,
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch, // add this
children: [
Expanded(
child: Container(
color: Colors.green,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Title',
textAlign: TextAlign.left,
),
Text('Description'),
],
),
),
),
Container(
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
color: Colors.red,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Title',
textAlign: TextAlign.left,
),
Text('Description'),
],
),
),
),
Expanded(
child: Container(
// MediaQuery.of(context).size.width
color: Colors.blue,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text('12hs 8mins'),
],
),
))
],
),),
Text('1000')
],
),
),
),
),
);
}
}
Here's a solution with as much flexibility that I could think of:
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: Container(
color: Colors.green,
alignment: Alignment.center,
child: Text('Top'),
),
),
Container(
height: 100,
child: Row(
children: [
Flexible(
flex: 3,
child: Container(
color: Colors.blue,
alignment: Alignment.center,
child: Text('Bottom Left'),
)
),
Flexible(
flex: 1,
child: Container(
color: Colors.orange,
alignment: Alignment.center,
child: Text('Bottom Right'),
),
),
],
),
)
],
);
}
}
Which will look like this:

Flutter showing widget by for loop showing error

I need to call widget multiple time. Mean i am fetching data and showing in a widget by for loop. Issue is when i am showing that widget its showing error
My code
class _CartPageState extends State<CartPage> {
void navigateToAddressPage() {
Get.to(AddressPage());
}
#override
void initState(){
this._query();
}
List<Widget> textWidgetList = List<Widget>();
void _query() async {
print('cart');
final dbHelper = DatabaseHelper.instance;
final allRows = await dbHelper.queryAllRows();
print(allRows);
print('query all rows:');
allRows.forEach((row) => print(row));
for (int i = 0; i < allRows.length; i++) {
textWidgetList.add(
Card(
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
margin: EdgeInsets.symmetric(vertical: 8.0),
child: Container(
width: double.infinity,
height: 120.0,
padding: EdgeInsets.all(12.0),
child: Row(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: CachedNetworkImage(
imageUrl:
'https://i.pinimg.com/564x/7f/0f/dc/7f0fdc10a9cb26e78d8e6257e1b06fb6.jpg',
height: 100.0,
width: 100.0,
),
),
SizedBox(width: 12.0),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Text(
'Nike Air Zoom Pegasus 36 Miami',
textAlign: TextAlign.start,
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
SizedBox(width: 5.0),
Row(
children: [
GestureDetector(
onTap: () {},
child: Icon(
FlutterIcons.delete_outline_mco,
),
)
],
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
'\$50',
),
),
// Counter(),
],
),
],
),
),
)
],
),
),
)
);
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: buildAppBar(context),
body: Container(
child: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 18.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 20.0),
Divider(color: Theme.of(context).accentColor.withOpacity(.5)),
SizedBox(height: 12.0),
Column(children: textWidgetList()),//here is error
SizedBox(height: 20.0),
buildCoupunBox(context),
SizedBox(height: 20.0),
buildPriceBox(context),
SizedBox(height: 18.0),
buildCheckoutButton(),
SizedBox(height: 20.0),
],
),
),
),
);
}
}
Its showing this error The expression doesn't evaluate to a function, so it can't be invoked. How can i solve this error ? I am simply using for loop and show a widget in a column but dont know why its showing this error. I have comment where is the error showing .
This error simply says that you should remove the "()", because textWidgetList is not a function but a variable.

How to space between rows?

I have an expanded widget for my ClipRRect, which I think I need, but I also need to spacebetween my row, but I can't manage it. If I wrap it in an expanded widget it changes the size of my image in ClipRRect, which I don't want to do. This is my code:
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(6),
child: GestureDetector(
onTap: function,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
flex: 1,
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Stack(
children: <Widget>[
assetImage,
],
),
),
),
Row(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('$myText -', style: myTextStyle),
SizedBox(width: 5.0,),
Text('$locationText', style: myTextStyle),
],
),
Card(
elevation: 1,
color: Colors.white,
shape: cardBorder,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('$myText - $endmyText mins', style: myTextStyle,),
),
),
],
),
],
),
),
),
);
}
Assuming your question says you want to divide widgets with equal spaces, for it replaces Row with Wrap widget
Wrap(
direction: Axis.horizontal,
spacing: 30, // add space in between widget
children: <Widget>[
Wrap(
spacing: 30, // add space in between widget
direction: Axis.horizontal,

Flutter Layout with Squares Only inside Variable-Height Containers

I want to try and create a layout of variable-height, but will take up the full width of the screen. I want 2 big squares on the left, with 2 little squares on the right of the squares as needed for each big square on the left. See the purple picture for details.
However, I can't seem to be able to do this where I guarantee the inner widgets and components will be squares. Is there a way to achieve this?
If this is possible, is it possible for me to also achieve the ability to drag and rearrange (scaling as I rotate the squares back and forth as well too)? I'm trying to achieve that type of layout and the ability to rotate from each one of the 6 pictures and it will scale correctly as needed in that aspect (or the ability to drag and drop to rearrange each of the pictures).
Help would be greatly appreciated! I showed what I did below, but it doesn't seem to work to even have square items inside of the variable-height container.
return Container(
child: AspectRatio(
aspectRatio: 1.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 7,
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
color: Colors.grey,
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.green,
),
),
],
)),
Expanded(
flex: 3,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 3,
child: Container(
color: Colors.orange,
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.red,
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.orange,
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.red,
),
)
],
),
)
],
),
),
);
Please try this code. You should start from here. It is responsive, you just need to work more on the alignment when the screen is too small
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return FittedBox(
child: Center(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.symmetric(vertical: 24.0, horizontal: 12.0),
child: Column(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
flex: 7,
child: _buildSquare(Colors.purple),
),
SizedBox(width: 12.0),
Expanded(
flex: 3,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: _buildSquare(Colors.purple),
),
),
SizedBox(height: 12.0),
Expanded(
child: _buildSquare(Colors.purple),
),
],
),
),
],
),
),
SizedBox(height: 12.0),
Expanded(
child: Row(
children: <Widget>[
Expanded(
flex: 7,
child: _buildSquare(Colors.purple),
),
SizedBox(width: 12.0),
Expanded(
flex: 3,
child: Column(
children: [
Expanded(
child: _buildSquare(Colors.purple),
),
SizedBox(height: 12.0),
Expanded(
child: _buildSquare(Colors.purple),
),
],
),
),
],
),
),
],
),
),
),
);
}
Widget _buildSquare(Color color) {
return Center(
child: AspectRatio(
aspectRatio: 1.0,
child: Container(
decoration: BoxDecoration(
color: color,
border: Border.all(color: Colors.black, width: 3.0)),
),
),
);
}
}