RenderBox was not laid out: RenderRepaintBoundary - flutter

I am getting error with listview builder and not sure how to resolve it.
If I remove the Listview builder code then it is not giving the error.
Here is the code.
Widget build(BuildContext context) {
return Theme(
isMaterialAppTheme: true,
data: ThemeData(
),
child:Scaffold(
backgroundColor: _dark ? null : Colors.grey.shade200,
key: _scaffoldKey,
appBar: myAppBar(),
endDrawer: myDrawer(),
body: Stack(
children: <Widget>[
SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(16.0, 10.0, 16.0, 16.0),
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color:Colors.grey,
// color: Colors.orange,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(4.0),
bottomRight: Radius.circular(4.0))),
padding: EdgeInsets.symmetric(horizontal:16.0, vertical: 15.0),
width: double.infinity,
child: Text("Booking Details",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18.0,
// fontWeight: FontWeight.bold,
color: Colors.white,
letterSpacing: 3,
wordSpacing: 3
),),
),
],
),
SizedBox(height: 20.0),
Container(
child: new ListView.builder(
itemCount: lists.length,
itemBuilder: (BuildContext context, int i) {
return Card(
margin:
const EdgeInsets.fromLTRB(10.0, 15.0, 10.0, 0.0),
child: new ExpansionPanelList(
expansionCallback: (int index, bool status) {
setState(() {
_selectedIndex= index;
_selectedIndex = _selectedIndex == i ? null : i;
});
},
children: [
new ExpansionPanel(
isExpanded: _selectedIndex == i,
headerBuilder: (BuildContext context,
bool isExpanded) =>
new Container(
padding:
const EdgeInsets.only(left: 15.0),
alignment: Alignment.centerLeft,
child: new Text(
'list-$i',
)),
body: new Container(child: new Text('content-$i'),),),
],
),
);
}),
),
How can I fix the issue?

You can try setting a height for the container that is holding your listview
Container(
height: 200.0, //for example
child: ListView.builder(
//your code
)
)

Related

why I got Another exception was thrown: Incorrect use of ParentDataWidget.?

Hello I'm trying to create a widget of smoothPageIndicator for the introduction of my page. The screen contain picture, title and description. but an exception occured Another exception was thrown: Incorrect use of ParentDataWidget.
this is the code :
#override
Widget buildView() {
var size = MediaQuery.of(context).size;
var textTheme = Theme.of(context).textTheme;
return SafeArea(
child: Scaffold(
floatingActionButton: isSelected
? FloatingActionButton(
backgroundColor: Colors.deepPurple,
onPressed: () {},
child: const Icon(Icons.arrow_forward),
)
: null,
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
centerTitle: true,
elevation: 0),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(models[currentIndex].imgAssetAddress),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.4), BlendMode.darken),
),
),
child: ClipRRect(
child: Expanded(
flex: 1,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
height: 500,
child: PageView.builder(
onPageChanged: (index) {
setState(() {
currentIndex = index;
});
},
controller: _controller,
itemCount: models.length,
itemBuilder: (BuildContext context, int index) {
currentIndex = index;
return GestureDetector(
onTap: () {
setState(() {
if (isSelected == false) {
isSelected = true;
} else {
isSelected = false;
}
});
},
child: Padding(
padding: const EdgeInsets.only(
top: 20, left: 30, right: 30, bottom: 15),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Colors.white,
border: isSelected
? Border.all(
width: 4,
color: Colors.deepPurple)
: null),
child: Column(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(models[index]
.imgAssetAddress),
fit: BoxFit.cover),
borderRadius:
BorderRadius.circular(15),
),
margin: const EdgeInsets.all(10),
height:
MediaQuery.of(context).size.height /
2.4,
),
Expanded(
child: Text(
models[index].city,
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Expanded(
child: Text(
models[index].description,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
color: Colors.grey[600],
),
)),
),
],
),
),
),
);
}),
),
SmoothPageIndicator(
controller: _controller,
count: models.length,
),
currentIndex == 3
/// GET STARTED BTN
? TextButton(
onPressed: (() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => BleScanWindow()),
);
}),
child: const Text("Get Started",
style: TextStyle(color: Colors.blue)),
)
/// SKIP BTN
: SkipBtn(
size: size,
textTheme: textTheme,
onTap: () {
setState(() {
_controller.animateToPage(3,
duration:
const Duration(milliseconds: 1000),
curve: Curves.fastOutSlowIn);
});
})
],
),
My question is how to edit this code to get a clean code and a performant response ?
Thanks in advance for your help
As mentioned, Expanded and Flexible widgets can only be used in Rows and Columns. I noticed that further down you are also using an Expanded inside a Padding widget:
Padding(
padding: const EdgeInsets.all(8.0),
child: Expanded( //// <--- problem
child: Text(
models[index].description,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
color: Colors.grey[600],
),
)),
),
In your source code:
child: ClipRRect(
child: Expanded( //// <--- problem
flex: 1,
child: BackdropFilter(
Here you are using an Expanded widget inside a ClipRRect, which is causing the issue you are seeing.
Expanded is a ParentDataWidget that only works inside a Flex (like Row or Column widget), it cannot be used as a child to a ClipRRect widget like you did.

onPageChanged with Future Dialog Flutter

I am trying to get my Flutter Dialog to show page indicator dots based off the onPageChanged setState and it doesnt seem to be working. What is happening is the dots are appearing and one is highlighted but as I swipe the dots are not following the current page. Any ideas? When I add a print statement to my setState I can see the activePage is corresponding with the current index. I am at odds as to why this is not working?
Future openDialog() => showDialog(
context: context,
builder: (BuildContext context) => Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
backgroundColor: const Color(0xFF64748b),
child: Container(
height: 300.0, // Change as per your requirement
width: 300.0, // Change as per your requirement
child: Column(
children: [
SizedBox(
width: MediaQuery.of(context).size.width,
height: 200,
child: PageView.builder(
scrollDirection: Axis.horizontal,
pageSnapping: true,
itemCount: eqs.length,
controller: _pageController,
onPageChanged: (page) {
setState(() {
activePage = page;
// print(activePage);
});
},
itemBuilder: (context, index) {
final titles = eqs[index];
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(15.0),
child: Text(
titles.eqTitle,
style: const TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(15.0),
child: Math.tex(
titles.eq,
mathStyle: MathStyle.display,
textStyle: const TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.bold,
),
),
),
],
);
},
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: indicators(eqs.length, activePage))
],
),
),
));
List<Widget> indicators(eqsLength, currentIndex) {
return List<Widget>.generate(eqsLength, (index) {
return Container(
margin: const EdgeInsets.all(5.0),
width: 10,
height: 10,
decoration: BoxDecoration(
color: currentIndex == index ? Colors.greenAccent : Colors.black26,
shape: BoxShape.circle),
);
});
}
Hey if you're trying to have a page indicator at the bottom of your page view, you can just use a very simple package called smooth_page_indicator
Future openDialog() => showDialog(
context: context,
builder: (BuildContext context) => Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
backgroundColor: const Color(0xFF64748b),
child: Container(
height: 300.0, // Change as per your requirement
width: 300.0, // Change as per your requirement
child: Column(
children: [
SizedBox(
width: MediaQuery.of(context).size.width,
height: 200,
child: PageView.builder(
scrollDirection: Axis.horizontal,
pageSnapping: true,
itemCount: eqs.length,
controller: _pageController,
itemBuilder: (context, index) {
final titles = eqs[index];
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(15.0),
child: Text(
titles.eqTitle,
style: const TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(15.0),
child: Math.tex(
titles.eq,
mathStyle: MathStyle.display,
textStyle: const TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.bold,
),
),
),
],
);
},
),
),
// Add this
SmoothPageIndicator(
controller: _pageController, // PageController
count: eqs.length,
effect: WormEffect(), // your preferred effect
onDotClicked: (index) {})
],
),
),
),
);
But if you want to have your custom widget for the indicator, instead of updating the active page, update your current index.
Hope you find this helpful!
[AMIR SMILEY]

How do I call my ChatMessages() function in my scaffold?

So i want to call my ChatMessages() in my scaffold, however I do not know where to call it without getting an error, here is my ChatMessages() function;
Widget chatMessages() {
return StreamBuilder(
stream: messageStream,
builder: (context, snapshot) {
return snapshot.hasData
? ListView.builder(
itemCount: snapshot.data.docs.length,
itemBuilder: (context, index) {
DocumentSnapshot ds = snapshot.data.docs[index];
return Text(ds["message"]);
})
: Center(
child: CircularProgressIndicator(),
);
},
);
then here is my scaffold;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.chatWithUsername),
),
body: Column(
children: [
Spacer(),
Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor,
),
child: SafeArea(
child: Row(
children: [
Icon(Icons.attach_file),
SizedBox(
width: 20,
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20 * 0.75),
decoration: BoxDecoration(
color: Colors.green.withOpacity(0.05),
borderRadius: BorderRadius.circular(40)),
child: Row(
children: [
SizedBox(
width: 20 / 4,
),
Expanded(
child: TextField(
controller: TextEditingController(),
decoration: InputDecoration(
hintText: "Send a message",
border: InputBorder.none),
)),
Icon(
Icons.send,
color: Theme.of(context)
.textTheme
.bodyText1
.color
.withOpacity(0.64),
),
],
Where can I implement the Chatmessages() within the scaffold to receive the data? For context I am adding messaging functionality to my app and this seems like a very easy fix however I cant figure it out :')
Ok, you'll need to have the following layout in your build function:
#override
Widget build(BuildContext context) {
return Container(
color: Theme.of(context).scaffoldBackgroundColor,
child: SafeArea(
top: false,
child: Scaffold(
appBar: AppBar(),
body: Column(
children: [
Expanded(
child: StreamBuilder<String>(),
),
MessageEntryWidget(),
],
),
),
),
);
}
should be something like this then:
#override
Widget build(BuildContext context) {
return Container(
color: Theme.of(context).scaffoldBackgroundColor,
child: SafeArea(
top: false,
child: Scaffold(
appBar: AppBar(
title: Text('chatWithUsername'),
),
body: Column(
children: [
Expanded(
child: StreamBuilder<String>(
stream: messageStream,
builder: (context, snapshot) {
return ListView.builder(
itemCount: itemCount,
itemBuilder: (context, index) {
//DocumentSnapshot ds = snapshot.data.docs[index];
return Text('message');
},
);
}),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 4),
child: Row(
children: [
Icon(Icons.attach_file),
SizedBox(
width: 20,
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20 * 0.75),
decoration: BoxDecoration(
color: Colors.green.withOpacity(0.05),
borderRadius: BorderRadius.circular(40)),
child: Row(
children: [
SizedBox(
width: 20 / 4,
),
Expanded(
child: TextField(
controller: TextEditingController(),
decoration: InputDecoration(
hintText: 'Send a message',
border: InputBorder.none),
)),
Icon(
Icons.send,
color: Theme.of(context)
.textTheme
.bodyText1
?.color
?.withOpacity(0.64) ??
Colors.red,
)
],
),
),
)
],
),
),
],
),
),
),
);
}
Wrap the ListView.builder in the StreamBuilder you have ...

Refresh listview based on button click

I have a list of categories and products. I want that when I click on a category:
The selected category should change color to orange.
The products listview should be refreshed with the selected category's products.
I tried to add setState and try to change both color and listview but that did not work. Any ideas what I need to rectify?
Future fetchProducts() async {
return await Provider.of<Products>(context, listen: false)
.fetchAndSetProducts('title', false);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
backgroundColor: Colors.grey[100],
elevation: 0,
brightness: Brightness.light,
leading: Icon(null),
actions: <Widget>[
IconButton(
onPressed: () {},
icon: Icon(
Icons.shopping_basket,
color: Colors.grey[800],
),
)
],
),
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: FutureBuilder(
future: _screenFuture,
// ignore: missing_return
builder: (context, snap) {
if (snap.error != null &&
!snap.error
.toString()
.contains('NoSuchMethodError')) {
return Center(child: Text('Something went wrong!'));
} else if (snap.hasData) {
var categoriesData = Provider.of<Categories>(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
FadeAnimation(
1,
Text(
'Food Delivery',
style: TextStyle(
color: Colors.grey[80],
fontWeight: FontWeight.bold,
fontSize: 30),
)),
SizedBox(
height: 20,
),
Container(
height: 50,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: categoriesData.items.length,
itemBuilder: (ctx, i) => FadeAnimation(
i.toDouble(),
makeCategory(
isActive: i.toDouble() == 0
? true
: false,
title: categoriesData.items
.toList()[i]
.title)))),
SizedBox(
height: 10,
),
],
);
} else if (snap.connectionState ==
ConnectionState.waiting) {
//return Container();
return Center(child: Spinner());
}
})),
Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: FutureBuilder(
future: _productScreenFuture,
// ignore: missing_return
builder: (context, snap) {
if (snap.error != null &&
!snap.error
.toString()
.contains('NoSuchMethodError')) {
return Center(child: Text('Something went wrong!'));
} else if (snap.hasData) {
productsData = Provider.of<Products>(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FadeAnimation(
1,
Text(
'Food Delivery',
style: TextStyle(
color: Colors.grey[80],
fontWeight: FontWeight.bold,
fontSize: 30),
)),
SizedBox(
height: 20,
),
SizedBox(
height: 300,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: productsData.items.length,
itemBuilder: (ctx, i) => FadeAnimation(
1.4,
makeItem(
image: 'assets/images/one.jpg',
title: productsData.items[i].title,
price:
productsData.items[i].price)))),
SizedBox(
height: 10,
),
],
);
} else if (snap.connectionState ==
ConnectionState.waiting) {
//return Container();
return Center(child: Spinner());
}
})),
SizedBox(
height: 30,
)
],
),
),
);
}
Widget makeCategory({isActive, title}) {
return AspectRatio(
aspectRatio: isActive ? 3 : 2.5 / 1,
child: GestureDetector(
onTap: () {
print(title + " clicked");
setState(() {
isActive = true;
productsData = Provider.of<Products>(context, listen: false)
.findBycategoryName(title);
print(productsData.first.title); // << data is available
});
},
child: Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: isActive ? Colors.yellow[700] : Colors.white,
borderRadius: BorderRadius.circular(50),
),
child: Align(
child: Text(
title,
style: TextStyle(
color: isActive ? Colors.white : Colors.grey[500],
fontSize: 18,
fontWeight: isActive ? FontWeight.bold : FontWeight.w100),
),
),
),
));
}
Widget makeItem({image, String title, double price}) {
return AspectRatio(
aspectRatio: 1 / 1.5,
child: GestureDetector(
child: Container(
margin: EdgeInsets.only(right: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(image),
fit: BoxFit.cover,
)),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(begin: Alignment.bottomCenter, stops: [
.2,
.9
], colors: [
Colors.black.withOpacity(.9),
Colors.black.withOpacity(.3),
])),
child: //Expanded(
Padding(
padding: EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: Icon(
Icons.favorite,
color: Colors.white,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"\Tsh. $price",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 10,
),
Text(
title,
style: TextStyle(color: Colors.white, fontSize: 20),
)
],
)
],
),
),
),
),
),
);
}
}
Actually When you call setState() your isActive is again changed to false because of this code:
makeCategory(
isActive: i.toDouble() == 0
? true
: false,
TRY THIS CODE:
bool currentCategory = 0;
Future fetchProducts() async {
return await Provider.of<Products>(context, listen: false)
.fetchAndSetProducts('title', false);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
backgroundColor: Colors.grey[100],
elevation: 0,
brightness: Brightness.light,
leading: Icon(null),
actions: <Widget>[
IconButton(
onPressed: () {},
icon: Icon(
Icons.shopping_basket,
color: Colors.grey[800],
),
)
],
),
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: FutureBuilder(
future: _screenFuture,
// ignore: missing_return
builder: (context, snap) {
if (snap.error != null &&
!snap.error
.toString()
.contains('NoSuchMethodError')) {
return Center(child: Text('Something went wrong!'));
} else if (snap.hasData) {
var categoriesData = Provider.of<Categories>(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
FadeAnimation(
1,
Text(
'Food Delivery',
style: TextStyle(
color: Colors.grey[80],
fontWeight: FontWeight.bold,
fontSize: 30),
)),
SizedBox(
height: 20,
),
Container(
height: 50,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: categoriesData.items.length,
itemBuilder: (ctx, i) => FadeAnimation(
i.toDouble(),
makeCategory(
isActive: i == currentCategory
? true
: false,
position: i,
title: categoriesData.items
.toList()[i]
.title)))),
SizedBox(
height: 10,
),
],
);
} else if (snap.connectionState ==
ConnectionState.waiting) {
//return Container();
return Center(child: Spinner());
}
})),
Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: FutureBuilder(
future: _productScreenFuture,
// ignore: missing_return
builder: (context, snap) {
if (snap.error != null &&
!snap.error
.toString()
.contains('NoSuchMethodError')) {
return Center(child: Text('Something went wrong!'));
} else if (snap.hasData) {
productsData = Provider.of<Products>(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FadeAnimation(
1,
Text(
'Food Delivery',
style: TextStyle(
color: Colors.grey[80],
fontWeight: FontWeight.bold,
fontSize: 30),
)),
SizedBox(
height: 20,
),
SizedBox(
height: 300,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: productsData.items.length,
itemBuilder: (ctx, i) => FadeAnimation(
1.4,
makeItem(
image: 'assets/images/one.jpg',
title: productsData.items[i].title,
price:
productsData.items[i].price)))),
SizedBox(
height: 10,
),
],
);
} else if (snap.connectionState ==
ConnectionState.waiting) {
//return Container();
return Center(child: Spinner());
}
})),
SizedBox(
height: 30,
)
],
),
),
);
}
Widget makeCategory({isActive, title, position}) {
return AspectRatio(
aspectRatio: isActive ? 3 : 2.5 / 1,
child: GestureDetector(
onTap: () {
print(title + " clicked");
setState(() {
currentCategory = position;
productsData = Provider.of<Products>(context, listen: false)
.findBycategoryName(title);
print(productsData.first.title); // << data is available
});
},
child: Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: isActive ? Colors.yellow[700] : Colors.white,
borderRadius: BorderRadius.circular(50),
),
child: Align(
child: Text(
title,
style: TextStyle(
color: isActive ? Colors.white : Colors.grey[500],
fontSize: 18,
fontWeight: isActive ? FontWeight.bold : FontWeight.w100),
),
),
),
));
}
Widget makeItem({image, String title, double price}) {
return AspectRatio(
aspectRatio: 1 / 1.5,
child: GestureDetector(
child: Container(
margin: EdgeInsets.only(right: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(image),
fit: BoxFit.cover,
)),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(begin: Alignment.bottomCenter, stops: [
.2,
.9
], colors: [
Colors.black.withOpacity(.9),
Colors.black.withOpacity(.3),
])),
child: //Expanded(
Padding(
padding: EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: Icon(
Icons.favorite,
color: Colors.white,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"\Tsh. $price",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 10,
),
Text(
title,
style: TextStyle(color: Colors.white, fontSize: 20),
)
],
)
],
),
),
),
),
),
);
}
}
the isActive is not a variable and when you change it in setState nothing happens. try using a int? index variable for saving your selected category index

How can i expand my container as per my text length?

I have created one widget called slidercarasol in that i had done following :
Widget slidercarasol = FutureBuilder(
future: GetAlerts(device_id),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return SpinKitChasingDots(
color: Colors.white,
size: 50.0,
);
} else if (snapshot.data.length == 0) {
return Container(
height: 100,
child: Center(
child: Text(
'NO ALERTS AVAILABLE NOW',
style: TextStyle(color: Colors.white, fontSize: 18),
)),
);
} else {
return new CarouselSlider(
aspectRatio: 16 / 5,
viewportFraction: 1.0,
autoPlayInterval: Duration(seconds: 20),
onPageChanged: (index) {
setState(() {
_current = index;
});
},
autoPlay: true,
pauseAutoPlayOnTouch: Duration(seconds: 10),
items: <Widget>[
for (var ind = 0; ind < snapshot.data.length; ind++)
GestureDetector(
child: Container(
child: Text(snapshot.data[ind].que,
softWrap: true,
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
),
onTap: () {},
),
],
);
}
});
and i had called that widget in scaffold
body: Container(
color: Colors.black,
height: MediaQuery.of(context).size.height,
child: Container(
height: double.infinity,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: <Widget>[
Card(
color: Colors.black,
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Stack(
alignment: Alignment.topLeft,
children: <Widget>[
Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/slideralert.png",),
fit: BoxFit.fill,
),
borderRadius: new BorderRadius.all(const Radius.circular(10.0)),
),
// color: Colors.black.withOpacity(0.5),
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.notifications,
color: Colors.white,
),
SizedBox(
height: 10,
),
slidercarasol
],
),
)
],
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
elevation: 5,
margin: EdgeInsets.only(right: 24.0, left: 24.0, top: 10.0),
),
otherwidget,
],
),
),
),
and i get the output like this,
i need the full text to be shown and the height of the container will be increased as per text is large in length.
i want to display full text in container if the text is short than no issue but when i get long text i am unable to display full text..
thanks in advance!
Try wrapping your slidercarasol with Flexible.
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.notifications,
color: Colors.white,
),
SizedBox(
height: 10,
),
Flexible(
fit: FlexFit.loose,
child: slidercarasol,
),
],
),