hope this will help u, btw forget about my constructor.
class ExpandableContainer extends StatefulWidget {
final String tanggal;
final String totalPrice;
final String totalMenu;
final String totalDrink;
final List<dynamic> menu;
final List<dynamic> payMenu;
final List<dynamic> drink;
final List<dynamic> payDrink;
final Map<String, int> menuCount;
final Map<String, int> drinkCount;
final Map<String, int> menuTotalPrice;
final Map<String, int> drinkTotalPrice;
const ExpandableContainer({
Key? key,
required this.tanggal,
required this.totalPrice,
required this.totalMenu,
required this.totalDrink,
required this.menu,
required this.drink,
required this.payMenu,
required this.payDrink,
required this.menuCount,
required this.drinkCount,
required this.menuTotalPrice,
required this.drinkTotalPrice,
}) : super(key: key);
@override
_ExpandableContainerState createState() => _ExpandableContainerState();
}
class _ExpandableContainerState extends State<ExpandableContainer>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> animation;
final OrderController controller = Get.put(OrderController());
bool _isExpanded = false;
@override
void initState() {
_animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 300),
);
animation = Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
));
super.initState();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
void toggleExpansion() {
setState(() {
_isExpanded = !_isExpanded;
if (_isExpanded) {
_animationController.forward();
} else {
_animationController.reverse();
}
});
}
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: const BorderRadiusDirectional.all(Radius.circular(15.0)),
child: Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: ExpansionPanelList(
elevation: 1,
expandedHeaderPadding: const EdgeInsets.all(0),
expansionCallback: (int index, bool isExpanded) {
toggleExpansion();
},
children: [
ExpansionPanel(
backgroundColor: Colors.white,
headerBuilder: (BuildContext context, bool isExpanded) {
return InkWell(
onTap: toggleExpansion,
child: Padding(
padding: const EdgeInsets.only(left: 15.0, top: 5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AutoSizeText(
widget.tanggal,
maxFontSize: 16,
minFontSize: 14,
style: GoogleFonts.montserrat(
fontWeight: FontWeight.w400, color: Colors.black),
),
AutoSizeText(
'Total Pemesanan : ${widget.totalPrice}',
maxFontSize: 16,
minFontSize: 14,
style: GoogleFonts.montserrat(
fontWeight: FontWeight.w400, color: Colors.black),
),
],
),
),
);
},
body: FadeTransition(
opacity: animation,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 15.0, vertical: 10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(height: 10.0),
AutoSizeText(
'Keterangan Produk',
maxFontSize: 18,
minFontSize: 16,
style: GoogleFonts.montserrat(
fontWeight: FontWeight.bold,
color: _isExpanded ? Colors.black : Colors.white,
),
),
const SizedBox(height: 5.0),
if (widget.totalMenu.isNotEmpty) ...[
AutoSizeText(
'Makanan:',
maxFontSize: 18,
minFontSize: 16,
style: GoogleFonts.montserrat(
fontWeight: FontWeight.w400,
color: _isExpanded ? Colors.black : Colors.white,
),
),
const SizedBox(height: 8.0),
AutoSizeText(
'Kategori Makanan : ${widget.menuCount}',
maxFontSize: 14,
minFontSize: 12,
style: GoogleFonts.roboto(
fontWeight: FontWeight.w400,
color: _isExpanded ? Colors.black : Colors.white,
),
),
AutoSizeText(
'Total Harga: ${widget.menuTotalPrice}',
maxFontSize: 14,
minFontSize: 12,
style: GoogleFonts.roboto(
fontWeight: FontWeight.w400,
color: _isExpanded ? Colors.black : Colors.white,
),
),
],
const SizedBox(height: 10.0),
if (widget.totalDrink.isNotEmpty) ...[
AutoSizeText(
'Minuman:',
maxFontSize: 18,
minFontSize: 16,
style: GoogleFonts.montserrat(
fontWeight: FontWeight.w400,
color: _isExpanded ? Colors.black : Colors.white,
),
),
const SizedBox(height: 8),
AutoSizeText(
'Kategori Minuman : ${widget.drinkCount}',
maxFontSize: 14,
minFontSize: 12,
style: GoogleFonts.roboto(
fontWeight: FontWeight.w400,
color: _isExpanded ? Colors.black : Colors.white,
),
),
AutoSizeText(
'Total Harga: ${widget.drinkTotalPrice}',
maxFontSize: 14,
minFontSize: 12,
style: GoogleFonts.roboto(
fontWeight: FontWeight.w400,
color: _isExpanded ? Colors.black : Colors.white,
),
),
],
],
),
),
),
isExpanded: _isExpanded,
),
],
),
),
);
}
}
If you want all container size the same then use this code. If not check Second Answer:-
<h2>Answer 1:-</h2>
<img src="https://i.stack.imgur.com/UfPfW.png" height="600"/>
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,
),
),
]),
));
}),
)),
],
)),
<h2>Answer 2:-</h2>
Use this package flutter_staggered_grid_view. Using this package use can create these types of containers.
[flutter_staggered_grid_view][1]
<h4>Output:-</h4>
<img src="https://i.stack.imgur.com/VMgge.png" height="500"/>
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.
[1]: https://pub.dev/packages/flutter_staggered_grid_view
