i have issue with design the ListTile in flutter - flutter

Question

i an trying to design the add to cart button when user click on 'add to cart' the 'add to cart' button hides and ListTile appear that is on back of button and listtile have three things title , leading and trailing everything is works like i want but issue is i want the same size of list tile as button size so it won't grow when listtile appear on screen
here is the video to clear what i mean
https://youtu.be/Bq2mrc5ao94
here is my code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int total=0;
bool cartbuttoncheck=true;
bool listbool=false;
IconData delete_icon=Icons.remove;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Button"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Visibility(
visible: listbool,
child: Container(
color: Colors.green,
child: SizedBox(
height: 50.0,
width: 160.0,
child: ListTile(
title: Center(child: Text(total.toString(),style: TextStyle(fontStyle: FontStyle.italic,color: Colors.white),)),
leading: IconButton(
icon: Icon(delete_icon,color: Colors.white,),
onPressed: (){
setState(() {
if(total==2)
{
print("i am 2");
delete_icon=Icons.delete;
total--;
}
else if(total==1 && delete_icon==Icons.delete)
{
total=0;
listbool=false;
cartbuttoncheck=true;
}
if(total>2)
{
// delete_icon=Icons.remove;
total--;
}
});
},
),
trailing: IconButton(
icon: Icon(Icons.add,color: Colors.white),
onPressed: (){
setState(() {
if(total==1 && delete_icon==Icons.delete)
{
delete_icon=Icons.remove;
}
total++;
});
},
),
),
),
),
),
Stack(
alignment: Alignment.center,
children: <Widget>[
Visibility(
visible: cartbuttoncheck,
child: RaisedButton(
onPressed: (){
setState(() {
cartbuttoncheck=false;
listbool=true;
if(total==0)
{
total++;
delete_icon=Icons.delete;
}
});
},
child: Text("Add to Cart",style: TextStyle(color: Colors.white),),
color: Colors.green,
),
),
],
),
],
),
),
),
);
}
}

Answer 1

Just like the ListTile uses a SizedBox with a defined size you can do the same to the RaisedButton
SizedBox(
height: 50.0,
width: 160.0,
child: RaisedButton(
onPressed: (){
setState(() {
cartbuttoncheck=false;
listbool=true;
if(total==0){
total++;
delete_icon=Icons.delete;
}
});
},
child: Text("Add to Cart",style: TextStyle(color: Colors.white),),
color: Colors.green,
),
)
Having said that I believe it would be better to not use all of the widgets you use(Column, Stack, Visibility) and just change between the ListTile and the RaisedButton based on a bool value (listbool for example)
class _MyAppState extends State<MyApp> {
int total = 0;
bool listbool = false;
IconData delete_icon = Icons.remove;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Button"),
),
body: Center(
child: Container(
color: Colors.green,
height: 50.0,
width: 160.0,
child: listbool
? ListTile(
title: Center(
child: Text(
total.toString(),
style: TextStyle(
fontStyle: FontStyle.italic, color: Colors.white),
)),
leading: IconButton(
icon: Icon(
delete_icon,
color: Colors.white,
),
onPressed: () {
setState(() {
if (total == 2) {
print("i am 2");
delete_icon = Icons.delete;
total--;
} else if (total == 1 &&
delete_icon == Icons.delete) {
total = 0;
listbool = false;
}
if (total > 2) {
// delete_icon=Icons.remove;
total--;
}
});
},
),
trailing: IconButton(
icon: Icon(Icons.add, color: Colors.white),
onPressed: () {
setState(() {
if (total == 1 && delete_icon == Icons.delete) {
delete_icon = Icons.remove;
}
total++;
});
},
),
)
: RaisedButton(
onPressed: () {
setState(() {
listbool = true;
if (total == 0) {
total++;
delete_icon = Icons.delete;
}
});
},
child: Text(
"Add to Cart",
style: TextStyle(color: Colors.white),
),
color: Colors.green,
),
),
),
),
);
}
}
Now you have a container of a specific size of color green in the center and based on the value of the listbool it changes its child to the ListTile and RaisedButton
UPDATE
class _MyAppState extends State<MyApp> {
double width; //the width of the RaisedButton based on the text
double height; //the heightof the RaisedButton based on the text
EdgeInsets myPadding = EdgeInsets.all(8); //a known padding to use in the RaisedButton
#override
void initState(){
super.initState();
TextSpan longestParagraphTest = TextSpan(
text: "Add to Cart",
style: TextStyle(color: Colors.white, fontSize: 14),
);
TextPainter _textPainter = TextPainter(text: longestParagraphTest, textDirection: TextDirection.ltr, maxLines: 1)..layout(minWidth: 0.0, maxWidth: double.infinity);
width = _textPainter.width + 16; //this is the padding
height = _textPainter.height + 16; //this is the padding
}
int total = 0;
bool listbool = false;
IconData delete_icon = Icons.remove;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Button"),
),
body: Center(
child: Container(
duration: const Duration(milliseconds: 300),
color: Colors.green,
height: height,
width: width, //now you know the size of the RaisedButton and use it in both the ListTile and RaisedButton
child: listbool
? ListTile(
title: Center(
child: Text(
total.toString(),
style: TextStyle(
fontStyle: FontStyle.italic, color: Colors.white),
)),
leading: IconButton(
icon: Icon(
delete_icon,
color: Colors.white,
),
onPressed: () {
setState(() {
if (total == 2) {
print("i am 2");
delete_icon = Icons.delete;
total--;
} else if (total == 1 &&
delete_icon == Icons.delete) {
total = 0;
listbool = false;
}
if (total > 2) {
// delete_icon=Icons.remove;
total--;
}
});
},
),
trailing: IconButton(
icon: Icon(Icons.add, color: Colors.white),
onPressed: () {
setState(() {
if (total == 1 && delete_icon == Icons.delete) {
delete_icon = Icons.remove;
}
total++;
});
},
),
)
: RaisedButton(
padding: myPadding,
onPressed: () {
setState(() {
listbool = true;
if (total == 0) {
total++;
delete_icon = Icons.delete;
}
});
},
child: Text(
"Add to Cart",
maxLines: 1,
style: TextStyle(color: Colors.white, fontSize: 14),
),
color: Colors.green,
),
),
),
),
);
}
}
And you will get something like this because the button size is too small for a ListTile to show 2 icons and a text
I have 2 recommendations if you want to keep it this way, in the initState change the minWidth in layout(minWidth: 0.0, maxWidth: double.infinity); to a greater value (let's say 100.0) just to be sure in case your minWidth is too small it changes to 100 to fit the ListTile. My second recommendation is to use an AnimatedContainer and change the size based on the widget displayed
AnimatedContainer(
duration: const Duration(milliseconds: 300),
color: Colors.green,
height: listbool ? 50.0 : height, //it animates to a a better size to fit the listTile
width: listbool ? 200.0 : width, //it animates to a a better size to fit the listTile
child: listbool ? ListTile(...) : RaisedButton(...),
),
where height and width are the values calculated in the initState. It will do a smooth animation between the 2 sizes (just like your video but smoother and cleaner)