flutterflutter-layoutcontainersexpand
Flutter size container to content within it
I am trying to create box within my widget that will size dynamically based on the content published within it, but it appears to be getting truncated when it hits the overflow.
Padding _buildReviewsSnapshot(Tasker user) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Row(
children: [
Expanded(
// flex: 3,
child: GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
children: List.generate(6, (index) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color.fromRGBO(212, 221, 230, 1)),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
margin: const EdgeInsets.all(6),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(children: [
Row(children: const [
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_border,
size: 16,
color: Colors.grey,
),
]),
const SizedBox(height: 10),
Text(
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on",
style: Theme.of(context).textTheme.bodyText1),
Text("- Charlee R",
style: Theme.of(context).textTheme.bodyText2),
]),
));
}),
)),
],
));
}
Solution
If you want all container size the same then use this code. If not check Second Answer:-
Answer 1:-
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Row(
children: [
Expanded(
// flex: 3,
child: GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
children: List.generate(6, (index) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color.fromRGBO(212, 221, 230, 1)),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
margin: const EdgeInsets.all(6),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(children: [
Row(children: const [
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_border,
size: 16,
color: Colors.grey,
),
]),
const SizedBox(height: 10),
Text(
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on",
style: Theme.of(context).textTheme.bodyText1,
overflow: TextOverflow.ellipsis,
maxLines: 5,
),
const SizedBox(height: 10),
SizedBox(
width: 150,
child: Text(
"- Charlee R",
style: Theme.of(context).textTheme.bodyText2,
textAlign: TextAlign.right,
),
),
]),
));
}),
)),
],
)),
Answer 2:-
Use this package flutter_staggered_grid_view. Using this package use can create these types of containers.
Output:-
Code:-
import 'package:archive/UI/screens/home_screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Demo(),
);
}
}
class Demo extends StatelessWidget {
String content =
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on";
String content1 =
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on ";
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Row(
children: [
Expanded(
// flex: 3,
child: StaggeredGridView.countBuilder(
staggeredTileBuilder: (int index) => StaggeredTile.fit(1),
crossAxisCount: 2,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color:
const Color.fromRGBO(212, 221, 230, 1)),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
margin: const EdgeInsets.all(6),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(children: [
Row(children: const [
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_border,
size: 16,
color: Colors.grey,
),
]),
const SizedBox(height: 10),
Text(
index.isEven ? content : content1,
style: Theme.of(context).textTheme.bodyText1,
),
const SizedBox(height: 10),
SizedBox(
width: 150,
child: Text(
"- Charlee R",
style: Theme.of(context).textTheme.bodyText2,
textAlign: TextAlign.right,
),
),
]),
));
}),
),
],
)),
);
}
}
I hope this answer is useful for you.