How to make fixed button flutter? - flutter

I have a problem with fixed button inside scroll view , I made a column with SingleChildScrollView and two button, but the problem is that the screen do not scroll. I tried the bottom Navigation bar but it has the same problem. How I can fix this?
my code :
Column(
children: [
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [
ListView.builder(
shrinkWrap: true,
itemCount: 200,
itemBuilder: (context, index) {
return Text("200");
},
),
ListView.builder(
shrinkWrap: true,
itemCount: 20,
itemBuilder: (context, index) {
return Text("bargougui");
},
),
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
width: 150,
height: 50,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.grey[300],
),
onPressed: () {},
child: Text(
'Contacter',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Colors.black,
fontStyle: FontStyle.italic,
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
width: 150,
height: 50,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.yellow,
),
onPressed: () {},
child: Text(
'Acheter',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Colors.black,
fontStyle: FontStyle.italic,
),
),
),
),
),
),
],
),
],
),
screen I want to make like this
any help will be appreciated ^^

Use Stack widget,
Stack(
children:[
SingleChildScrollView(),
Positioned(
bottom:0,
left:15,
right:15,
child:Row(children :[Button1(),Button2()],
,)
]
Try tweaking the numbers to fit your case.

Related

Scrollbar is not visible when wrapping listView Builder with SingleChildScrollView or ListView

**> Here is my code. it contains a ListView builder which is wrapped with
RawScrollBar widget and they both wrapped with SingleChildScrollView
Widget. I want a show ScrollBar in ListView.Builder**
Scaffold(
backgroundColor: kPrimaryColor,
body: SafeArea(
child: SizedBox(
height: kGetSize(context).height,
child: Column(
children: [
const SizedBox(
height: 16,
),
const Center(
child: UserLevelDetailsContainer(),
),
Expanded(
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 24, vertical: 24),
**child: SingleChildScrollView(
physics: const ScrollPhysics(),
controller: _scrollController,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'General Subjects',
style: GoogleFonts.openSans(
fontWeight: FontWeight.w700,
fontSize: 20,
color: const Color(0xfff3c304)),
),
const SizedBox(
height: 8,
),
RawScrollbar(
thumbVisibility: true,
interactive: true,
thumbColor: Colors.black,
controller: _scrollController,
radius: const Radius.circular(60),
thickness: 6,
child: ListView.builder(
controller: _scrollController,
physics: const NeverScrollableScrollPhysics(),
itemCount: SubjectDetail.listOfSubjects.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return SizedBox(
width: 344,
height: 96,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: ListTile(
contentPadding: const EdgeInsets.symmetric(
horizontal: 24, vertical: 8),
title: Padding(
padding: const EdgeInsets.only(bottom: 4),
child: Text(
SubjectDetail
.listOfSubjects[index].name,
style: GoogleFonts.openSans(
fontWeight: FontWeight.w700,
fontSize: 15),
),
),
subtitle: Text(
SubjectDetail
.listOfSubjects[index].description,
style: GoogleFonts.openSans(
fontWeight: FontWeight.w400,
fontSize: 10),
),
trailing: Image.asset(SubjectDetail
.listOfSubjects[index].imageUrl),
),
),
);
},
),
),**
const SizedBox(
height: 8,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'General Subjects',
style: GoogleFonts.openSans(
fontWeight: FontWeight.w700,
fontSize: 20,
color: const Color(0xfff3c304)),
),
Text(
'*select one subject',
style: GoogleFonts.openSans(
fontWeight: FontWeight.w300,
fontSize: 14,
color: const Color(0xfff3c304)),
)
],
),
],
),
),
),
)
],
),
),
),
);
I have given same ScrollController object to ListView builder,
RawScrollBar and SingleChildScollView widget.Altough I had given
different ScrollController objects to them

Flutter - show items in a list view with just the necessary length and borders

In my list view in a Flutter project, I need to show items i.e. pieces of text that are stored in a List variable. Each item (i.e. piece of text) will have rounded borders but the length of each item will vary according to the number of characters in the text. And on tapping each of the list item i.e. the piece of text, some action will take place.
Following is an image showing how the output should be:
Currently each list item takes the maximum size of the horizontally available space and text is aligned in the middle. But I want the background of each list item to be just containing the piece of text and not to be the full size horizontally and then text should be in the middle of the background. Current result is in the following image.
Code:
final List<String> names = <String>['Topic 1', 'Topic 2 ', 'Topic 3', 'Topic 4', 'Topic 5'];
ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
margin: EdgeInsets.all(2),
// color: msgCount[index]>=10? Colors.blue[400] msgCount[index]>3? Colors.blue[100]: Colors.grey,
child: Container(
child: Padding(
padding:EdgeInsets.fromLTRB(3, 0,0,0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children:[
Expanded(
child: TextButton(
onPressed: () {
print("Do something!");
},
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize:MaterialStateProperty.all(Size(double.infinity, 14)),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0)),
),
backgroundColor:
MaterialStateProperty.all(
Colors.white
)),
child:Text('${names[index]} ',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
),
]
),
),
),
);
}
)
How can I achieve the list items to be as in the 1st screenshot ?
EDIT:
The above list view is inside the following code i.e. the following code should be appended to the above code and necessary brackets should be suffixed.
SingleChildScrollView(
// child: Container(
// padding: const EdgeInsets.only(top: 80, left: 24, right: 24),
child:Container(
height: MediaQuery.of(context).size.height, // or something simular :)
child: Column(
children: [
Text('Select a Topich000'),
EDIT2:
I am pasting the full code (i.e. not only the list view related code as the list view is inside other code snippet) from my application below.
So when you post answer, make sure that you use the format of my full code below:
final List<String> names = <String>['Topic 1', 'Topic 2 ', 'Topic 3', 'Topic 4', 'Topic 5'];
return Scaffold(
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle.light,
title: const Text('Topics'),
),
body: SingleChildScrollView(
child:Container(
height: MediaQuery.of(context).size.height, // or something simular :)
child: Column(
children: [
Text('Select a Topic'),
Expanded(
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
margin: EdgeInsets.all(2),
child: Container(
child: Padding(
padding:EdgeInsets.fromLTRB(3, 0,0,0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children:[
Expanded(
child: TextButton(
onPressed: () {
print("Do something !");
Navigator.of(context).pushNamed("/subtopicScreen", arguments: {'index_found': index+1,
'uploadable_image_path':uploadable_image_path });
},
// );
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize:MaterialStateProperty.all(Size(double.infinity, 14)),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0)),
),
backgroundColor:
MaterialStateProperty.all(
//Colors.green[900]
Colors.white
)),
child:Text('${names[index]} ',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
),
]
),
),
),
);
}
)
)
],
),
),
// ),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 35.0,
width: double.maxFinite,
/*decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
),*/
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
//IconButton(icon: Icon(Icons.chat), onPressed: (){ },),
InkWell(
onTap: () {
//Navigator.pushNamed(context, "YourRoute");
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => topicScreen(),
),
);
},
child: TextButton(
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: Text('..',
style: TextStyle(
color: Colors.white,
// backgroundColor: Colors.blue,
fontSize: 14,
fontWeight: FontWeight.w500)),
),
style: TextButton.styleFrom(
primary: Colors.teal,
backgroundColor: Colors.blue,
onSurface: Colors.yellow,
side: BorderSide(color: Colors.teal, width: 2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
onPressed: () {
print('Pressed');
},
),
),
],
),
),
),
);
}
Try removing the Expanded widget and remove minimumSize:MaterialStateProperty.all(Size(double.infinity, 14)) from your TextButton Widget.
Code:
ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
margin: EdgeInsets.all(2),
// color: msgCount[index]>=10? Colors.blue[400] msgCount[index]>3? Colors.blue[100]: Colors.grey,
child: Container(
child: Padding(
padding: EdgeInsets.fromLTRB(3, 0, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextButton(
onPressed: () {
print("Do something!");
},
style: ButtonStyle(
tapTargetSize:
MaterialTapTargetSize.shrinkWrap,
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(40.0)),
),
backgroundColor: MaterialStateProperty.all(
Colors.white)),
child: Text(
'${names[index]} ',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
]),
),
),
);
})
Try below code and used UnconstrainedBox.
UnconstrainedBox means render at its natural size.
Your List:
List list = [
'Science',
'Mathematics',
'English',
'Mental Ability',
];
Your Widget:
ListView.builder(
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
UnconstrainedBox(
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(4),
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey,
),
borderRadius: BorderRadius.all(
Radius.circular(20.0),
),
),
child: InkWell(
onTap: () {
print('You Tapped on ${list[index]} subject');
},
child: Text(
list[index],
),
),
),
),
],
);
},
);
Result Screen->
You should try giving the widget in the builder method of the ListView.builder widget a height, specifically to your Container.
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
width: <your width here> <<<<<------
EDIT:
Working code.
final names = <String>[
'Topic 1',
'Topic 2 ',
'Topic 3',
'Topic 4',
'Topic 5'
];
return Scaffold(
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle.light,
title: const Text('Topics'),
),
body: SingleChildScrollView(
child: SizedBox(
height: MediaQuery.of(context).size.height, // or something simular :)
child: Column(
children: [
const Text('Select a Topic'),
Expanded(
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
width: 100,
margin: const EdgeInsets.all(2),
padding: const EdgeInsets.fromLTRB(3, 0, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
TextButton(
onPressed: () {
print("Do something !");
// Navigator.of(context).pushNamed("/subtopicScreen", arguments: {'index_found': index+1,
// 'uploadable_image_path':uploadable_image_path });
},
// );
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: MaterialStateProperty.all(
const Size.fromWidth(100),
),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
40,
),
),
),
backgroundColor: MaterialStateProperty.all(
//Colors.green[900]
Colors.white,
),
),
child: Text(
'${names[index]} ',
style: const TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
],
),
);
},
),
)
],
),
),
// ),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 35.0,
width: double.maxFinite,
/*decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
),*/
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
//IconButton(icon: Icon(Icons.chat), onPressed: (){ },),
InkWell(
onTap: () {
//Navigator.pushNamed(context, "YourRoute");
},
child: TextButton(
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: Text('..',
style: TextStyle(
color: Colors.white,
// backgroundColor: Colors.blue,
fontSize: 14,
fontWeight: FontWeight.w500)),
),
style: TextButton.styleFrom(
primary: Colors.teal,
backgroundColor: Colors.blue,
onSurface: Colors.yellow,
side: BorderSide(color: Colors.teal, width: 2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
onPressed: () {
print('Pressed');
},
),
),
],
),
),
),
);

Flutter how to have multiple Lists

i am beginner in flutter , i created a widget that displays a player informations , i used ListView and ListView.builder but i had an uknown error that said : Failed assertion: line 1785 pos 12: 'hasSize' and Vertical viewport was given unbounded height.
i do not know what is the source of this error , it started only when i added the ListView builder , before i add it everything was working fine
here what i have tried:
import 'package:flutter/material.dart';
import 'package:tl_fantasy/widgets/Player_Widget.dart';
import 'player_arguments.dart';
class PlayerDetails extends StatelessWidget {
#override
Widget build(BuildContext context) {
final PlayerArguments args = ModalRoute.of(context).settings.arguments;
List<Stats> stats = [
Stats("Matches", args.matches ),
Stats("Goals", args.goals ),
Stats("Assists", args.assists ),
Stats("Saves", args.saves ),
];
List<Team> teams = [
Team("Barcelona B", "https://i.pinimg.com/originals/ef/9c/3f/ef9c3fccec423f70376fcafa05c5d447.jpg","1998" ),
Team("Barcelona", "https://i.pinimg.com/originals/ef/9c/3f/ef9c3fccec423f70376fcafa05c5d447.jpg","2005" ),
];
return Scaffold(
appBar: AppBar(
title: Text("Player Details"),
backgroundColor: Colors.blue[300],
elevation: 0.0,
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.purple, Colors.blue])
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.purple, Colors.black38])),
child: ListView(
children: [
SizedBox(
height: 20,
),
Container(
width: double.infinity,
child: Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child:
Row(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(args.image),
),
const SizedBox(width:10.0),
Spacer(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget> [
Text(args.name, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0,
)),
const SizedBox(height: 5.0, ),
Text(args.club, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0,
)),
const SizedBox(height: 5.0, ),
Text("Role : "+args.role, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0, color: Colors.grey[600],
)),
const SizedBox(height: 5.0, ),
Text("Position : "+args.club, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0, color: Colors.grey[600],
)),
const SizedBox(height: 5.0, ),
Text("Nationality : "+args.nationality, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0, color: Colors.grey[600],
)),
],
),
],
),
),
),
),
Container(
padding: EdgeInsets.all(12.0),
child: GridView.builder(
shrinkWrap: true,
itemCount: stats.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0
),
itemBuilder: (BuildContext context, int index){
return Card(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
alignment: Alignment.topCenter,
padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Text(stats[index].result,style: TextStyle(fontSize: 20.0)),
),
Container(
alignment: Alignment.bottomCenter,
child: Text(stats[index].title,style: TextStyle(fontSize: 25.0)),),
]
),
),
);
},
)
),
SizedBox(
height: 30,
),
Container(child:
ListView.builder(
itemBuilder: (context, index){
return Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child:
Row(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(teams[index].image),
),
const SizedBox(width:10.0),
Spacer(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget> [
Text(teams[index].name, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0,
)),
const SizedBox(height: 5.0, ),
Text("joined : "+teams[index].date, style: TextStyle( fontWeight:FontWeight.bold,
fontSize: 18.0, color: Colors.grey[600],
)),
],
),
],
),
),
);
},
itemCount: teams.length,
),),
],
),
),
),
);
}
}
class Stats{
String title;
String result;
Stats(this.title,this.result);
}
class Team {
String name;
String image;
String date;
Team(this.name,this.image,this.date);
}
I am trying to know what happened and how to solve the error after i added the ListView.builder
Change this:
Container(child:
ListView.builder(
itemBuilder: (context, index){
return Card(
to this:
Flexible(child:
ListView.builder(
shrinkwrap: true,
itemBuilder: (context, index){
return Card(
This is caused because you're using a listviewbuilder inside a column, and both expand in the same direction, flutter doesn't know when to stop laying out the listview. If Flexible doesn't work, use expanded instead, and keep the shrink wrap.
Use a CustomScrollView with SliverList and/or SliverGrid for multiple scrolling list in the same widget.
Try adding shrinkWrap: true inside listView.builder
--UPDATE--
You can disable the scroll of the child scrollable widget if its parent is already scrollable.
children: [
ListView.builder(
...
physics: NeverScrollableScrollPhysics(),
...
)
...

Display list of datas from sharedprefrence to text widget flutter?

I am saving some list of data to Sharedprefrence and tried to call the data from saved sharedprefrence and it returs all the values i have saved,then i tried to show data from sharedprefrence to a text widget but it shows null,
i need something like,if i have t text widgets how do pass data to those two widget let's say ₹575 and TWA Cap
Retrieving the data from sharedprfrence
List<String> listdata=[];
void initState() {
super.initState();
SharedPrefrence().getCartItem().then((data) async{
listdata = data;
print(listdata);
});
}
this what i am geting from the sharedprefrence
[TWA Cap, ₹575, M, Red]
trying to shows te data to text widget (Whole widget)
Widget CoupensLists() {
return SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Container(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Row(
children: <Widget>[
Expanded(
child: Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: GestureDetector(
onTap: () {
},
child: Container(
height: 150,
width: 350,
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.symmetric(vertical: 5),
child: Container(
height: 50,
width: 80,
child: Image.network("image"),
/* decoration: BoxDecoration(
image: DecorationImage(
image: Image.,
fit: BoxFit.fill,
),
),*/
),
),
SizedBox(
height: 5,
),
Text(
"Prodcut name",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold),
),
Text("Prodcut name",
style: TextStyle(fontSize: 12)),
SizedBox(
height: 10,
),
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(
vertical: 4),
child: Container(
width: 80,
child: Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/bg_price_btn_black.svg',
),
Padding(
padding: const EdgeInsets.all(5),
child: Text(
"Price"
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
)
],
),
),
),
Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/bg_boon_btn_red.svg',
),
Padding(
padding: const EdgeInsets.all(5),
child: Text(
"Book Now",
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
)
],
),
],
),
],
),
],
),
),
),
),
),
],
);
},
),
),
);
}
Try this:
List<String> listdata=[];
void initState() {
super.initState();
SharedPrefrence().getCartItem().then((data) async{
setState(() {
listdata = data;
});
});
}
You're getting this because you didn't upated your screen after changing the listdata variable
use in initail function
setState(() {
listdata = data;
});
then
Widget CoupensLists() {
return SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Container(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Row(
children: <Widget>[
Expanded(
child: Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: GestureDetector(
onTap: () {
},
child: Container(
height: 150,
width: 350,
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.symmetric(vertical: 5),
child: Container(
height: 50,
width: 80,
child: Image.network("image"),
/* decoration: BoxDecoration(
image: DecorationImage(
image: Image.,
fit: BoxFit.fill,
),
),*/
),
),
SizedBox(
height: 5,
),
Text(
listdata.length!=0? listdata[0]:"",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold),
),
Text( listdata.length!=0? listdata[1]:"",
style: TextStyle(fontSize: 12)),
SizedBox(
height: 10,
),
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(
vertical: 4),
child: Container(
width: 80,
child: Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/bg_price_btn_black.svg',
),
Padding(
padding: const EdgeInsets.all(5),
child: Text(
listdata.length!=0? listdata[2]:"",
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
)
],
),
),
),
Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/bg_boon_btn_red.svg',
),
Padding(
padding: const EdgeInsets.all(5),
child: Text(
listdata.length!=0? listdata[3]:"",
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
)
],
),
],
),
],
),
],
),
),
),
),
),
],
);
},
),``
),
);
}

How to show circularprogressindicator along with bottomsheet in flutter?

i am using bottomsheet in my code and due to that it is not showing my circularprogressindicator when isLoading is true but else part of ternary operator is working perfectly. Is there anyother way to do that. Or where i am doing wrong in the code?
(isLoading==true) ? Center(
child: Container(
height: 24,
width: 24,
child: CircularProgressIndicator(
backgroundColor: CommonColors.primaryColor,
strokeWidth: 1,
),
),
)
:
Column(
children: <Widget>[
Expanded(
child: ListView.separated(
itemCount: clist.cartlist.length,
itemBuilder: (BuildContext context, int index) {
return _buildCartProduct(index);
},
separatorBuilder: (context, index) {
return Divider(
color: Colors.grey[300],
);
},
),
),
SizedBox(
height: 80,
)
],
),
bottomSheet: isLoading?Container():Container(
height: 80.0,
color: CommonColors.secondaryBackgroundColor,
child: Column(crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(margin: EdgeInsets.symmetric(horizontal: 16),child:
Text('Total: \$${clist.getSubTotal()}',
style: TextStyle(fontWeight: FontWeight.bold,fontSize: 16),)),
Expanded(
child: FlatButton(onPressed: (){},
color: CommonColors.primaryColor,
child: Row(mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'PLACE',
style: TextStyle(
color: CommonColors.secondaryBackgroundColor,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
],
),
),
in this part you're showing an empty container if loading
bottomSheet: isLoading?Container():Container(
so change it to be your CircularProgressIndicator
bottomSheet: isLoading ? CircularProgressIndicator():Container(