flutter: how to scroll listview inside listview using a button - flutter

i have nested Listview.Builder inside my FutureBuilder one is scroll horizontally and one in vertically what i want is when i click on a button i want to scroll my horizontal listview i passed a ScrollController to horizontal listview but when i press the arrow all of horizontal listview scroll not of the index.
How Can i achieve that...
here i my code...
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 30, right: 10),
child: FutureBuilder<List<Catagory>>(
future: categoryList,
builder: (context, snapshot) {
if (snapshot.hasData) {
List<Catagory> model = snapshot.data!;
return ListView.builder(
itemCount: model.length,
itemBuilder: (context, index) {
List<Product> product =
model[index].products;
List<bool> scroll=List.generate(model.length, (index) => false);
return Column(
children: [
Row(
children: [
SizedBox(width: width * 0.5,
child: Text(model[index].name,
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
style: const TextStyle(
color: Colors.red,
fontSize: 16,
)),
),
SizedBox(width: 30),
Expanded(
child: Container(
height: 1,
color: Colors.grey,
)),
SizedBox(width: 40),
],
),
SizedBox(
height: 10,
),
Row(
children: [
Expanded(
child: Container(
width: width,
height: 140,
child: ListView.builder(
controller: _controller ,
scrollDirection: Axis.horizontal,
itemCount: model[index].products.length,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 80,
height: 130,
padding: EdgeInsets.only(right: 5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 70,
height: 70,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(5),
color: primaryColor),
child: CachedNetworkImage(
imageUrl: product[index].img,
placeholder: (context, url) => const Center(
child: SizedBox(
width: 25,
height: 25,
child: CircularProgressIndicator())),
imageBuilder: (context, imageProvider) =>
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover),
),
),
errorWidget: (context, url, error) => Icon(Icons.error),
),
),
const SizedBox(height: 3,),
Text(product[index].name,
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
),
const SizedBox(height: 2,),
MyText(title: (product[index].salePrice != '') &&
(double.parse(product[index].salePrice) <
double.parse(product[index].regularPrice))
? product[index].salePrice
: product[index].regularPrice,
textColor: Colors.black54,
),
const SizedBox(height: 3,),
MyTextButton(
width: 55,
height: 24,
title: 'AƱadir',
fontSize: 8,
textColor: Colors.white,
backgroundColor: primaryColor,
cornerRadius: 5,
onPress: () {
Navigator.push(context, MaterialPageRoute(builder: (context) =>
ProductType(product: product[index])));
})
],
),
);
}))),
InkWell(
onTap: () {
_animateToIndex(5);
// here when i press this i want to make horizontal list of specific index to scroll
},
child: Container(
height: 140,
width: 40,
child: Icon(
Icons.arrow_forward_ios,
color: Colors.grey),
),
)
],
),
SizedBox(
height: 10,
),
],
);
});
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return Center(child: CircularProgressIndicator());
},
)))
My Animation Code...
final ScrollController _controller = ScrollController();
final double _height = 100.0;
void _animateToIndex(int index) {
_controller.animateTo(
index * _height,
duration: Duration(seconds: 5),
curve: Curves.fastOutSlowIn,
);
}
i'm new to flutter i research too much but i didn't found any solution i have to submit this project please help me as soon as possible thanks in advance...

Related

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]

I am trying to use keys to preserve the state of the widgets and remove the blinking effect when setState is called

I am trying to remove the blinking/flashing effect after the widgets are rebuild. I read about keys, but it's not working, I added a unique key to every GridView builder element as you see in the code below.
Now when I resize, the widgets are rebuilt because the setState function is called but I can not preserve their state.
void addOutfitPlannerDialog(BuildContext context) async{
await showGeneralDialog(
barrierColor: Colors.black.withOpacity(0.5),
transitionBuilder: (context, a1, a2, widget) {
return SafeArea(
child: Transform.scale(
scale: a1.value,
child: Opacity(
opacity: a1.value,
child: AlertDialog(
actionsPadding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
contentPadding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
titlePadding: const EdgeInsets.fromLTRB(20, 20, 20, 0),
buttonPadding: const EdgeInsets.all(0),
title: _getBackAndSaveButtons(context),
backgroundColor: Colors.white,
insetPadding: const EdgeInsets.all(0),
content: StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return SizedBox(
width: 100.w,
height: 100.h,
child: Stack(
children: [
Positioned(
top: 0,
child:
Container(
width: 100.w,
height: 82.h,
color: const Color(0xff393432),
child: FittedBox(
fit: BoxFit.fill,
child: Container(
width: 100.w,
height: 100.h,
margin: EdgeInsets.fromLTRB(45, 10, 45, 15.h),
child: Screenshot(
controller: screenshotController,
child: Container(
color: Colors.white,
child: Stack(
children: stackChildren,
),
),
),
),
),
),
),
Positioned(
bottom: 0,
child: Container(
height: heightBottomOutfitPlanner,
decoration: const BoxDecoration(
color: Colors.white,
border: Border(
top: BorderSide( // <--- top side
color: Colors.grey,
width: 1.0,
),
),
),
width: 100.w,
child: Column(
children: [
SizedBox(
width: 100.w,
height: 8.h,
child: Row(
children: [
Expanded(
flex: 7,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: outfitPlanerOrganizerEntriesList
.length,
itemBuilder: (BuildContext context,
int index) {
return InkWell(
onTap: () {
getOutfitPlannerTabTappedImages(
outfitPlanerOrganizerEntriesList[index],
setState);
},
child: Container(
padding: const EdgeInsets.fromLTRB(
30, 0, 30, 0),
decoration: (outfitPlanerOrganizerEntriesList[index] ==
myOutfitPlannerTabTappedImages[0]
.closetOrganizer) ||
(outfitPlanerOrganizerEntriesList[index] ==
"To Buy" &&
myOutfitPlannerTabTappedImages[0]
.closetOrganizer ==
null)
? const BoxDecoration(
border: Border(
bottom: BorderSide( // <--- top side
color: Color(0xffE4BCB4),
width: 3.0,
),
),
)
: null,
child: Center(child: Text(
outfitPlanerOrganizerEntriesList[index],
style: TextStyle(
fontSize: SizerUtil
.deviceType ==
DeviceType.mobile
? 16
: 25,
))),
),
);
}
),
),
const SizedBox(width: 30),
Expanded(
flex: 1,
child: Container(
decoration: const BoxDecoration(
border: Border(
left: BorderSide( // <--- top side
color: Colors.black,
width: 1.0,
),
),
),
child: GestureDetector(
onPanStart: (details) =>
_handleDrag(details, setState),
onPanUpdate: (details) =>
_handleUpdate(details, setState),
child: Icon(Icons.drag_indicator,
size: SizerUtil.deviceType ==
DeviceType.mobile ? 35 : 45,
),
)
),
),
],
),
),
const SizedBox(height: 5),
!isLoadingOutfitPlannerTabTappedImages ? Container(
width: 100.w,
margin: const EdgeInsets.fromLTRB(5, 0, 5, 0),
height: heightBottomOutfitPlanner - 10.h,
child: GridView.builder(
physics: const ScrollPhysics(),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
crossAxisSpacing: 5,
mainAxisSpacing: 5,
maxCrossAxisExtent: SizeConfig.screenWidth! /
4,),
itemCount: myOutfitPlannerTabTappedImages
.length,
itemBuilder: (BuildContext ctx, index) {
return InkWell(
key: Key(index.toString()),
onTap: () {
try {
removeBackground(ctx, setState, CleverCloset.dataFromBase64String(myOutfitPlannerTabTappedImages[index].getImage!));
}
catch (e) {
stackChildren.add(MoveableStackItem(CleverCloset.imageFromBase64String(myOutfitPlannerTabTappedImages[index].getImage!).image));
}
},
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20))
),
width: SizeConfig.screenWidth! / 4,
height: SizeConfig.screenWidth! / 4,
child: FittedBox(
child:
FadeInImage(
placeholder: const AssetImage(
'assets/placeholder.gif'),
image: CleverCloset
.imageFromBase64String(
myOutfitPlannerTabTappedImages[index]
.getImage!)
.image,
fit: BoxFit.fill,
),
fit: BoxFit.fill,
),
),
);
}
),
) : Container(),
],
),
),
),
],
),
);
}
)
),
),
),
);
},
transitionDuration: const Duration(milliseconds: 100),
barrierDismissible: false,
barrierLabel: '',
context: context,
pageBuilder: (context, animation1, animation2) {return Container();}
);
}
You can add the below logic to your code. It basically gets executed when the widget has build.
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) => function(context));
}
And now you can implement the function(context) to do what you need to do after the build.

TextField don't resize my alertdialog - Flutter

I leave the entire code fragment, the main idea is to have a textfield that, by using the keyboard, shows me a series of elements, in the description variable, I have that element to select, this works well, the only issue is, how to keep my alertdialog with all the correct notes.
return await Get.generalDialog(
barrierLabel: "Barrier",
barrierDismissible: false,
transitionBuilder: (context, a1, a2, widget) {
return StatefulBuilder(builder: (context, setState) {
return Transform.scale(
scale: a1.value,
child: Opacity(
opacity: a1.value,
child: Dialog(
insetAnimationCurve: Curves.bounceOut,
insetPadding: EdgeInsets.only(right: 20, left: 20),
//backgroundColor: colorFour(),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: SingleChildScrollView(
child: Container(
height: 340,
child: Column(
children: <Widget>[
Container(
alignment: Alignment.topCenter,
height: 50,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
padding: EdgeInsets.all(5),
child: Center(
child: Text(
title,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w600),
maxLines: 2,
textAlign: TextAlign.center,
),
),
),
SingleChildScrollView(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: [
Container(
margin: EdgeInsets.only(top: 10),
child: TextFormField(
controller: controller,
decoration: InputDecoration(
border: OutlineInputBorder(
gapPadding: 5.0)),
keyboardType: TextInputType.text,
maxLines: 1,
onChanged: (String cadena) async {
listado = pivote
.where((x) => x.descripcion
.split("/")[value]
.toLowerCase()
.contains(
cadena.toLowerCase()))
.toList();
setState(() {});
},
),
),
Container(
height: 200,
margin: EdgeInsets.only(
top: 10, bottom: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(5)),
border: Border.all(
color: Colors.grey, width: 1)),
child: ListView.builder(
padding: const EdgeInsets.all(0.0),
physics: BouncingScrollPhysics(),
itemCount: listado.length,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Container(
height: 34,
child: InkWell(
child: SizedBox.expand(
child: Align(
alignment:
Alignment.centerLeft,
child: Padding(
padding:
EdgeInsets.only(
right: 5,
left: 5),
child: Text(
listado[index]
.descripcion
.split(
"/")[value],
textAlign:
TextAlign.left),
),
),
),
onTap: () {
Get.back(result: {
"item": listado[index],
});
}),
);
}),
),
],
)),
],
),
),
),
),
));
});
},
pageBuilder: (context, animation1, animation2) {
return Container();
});
I need to overlay my alertdialog, that is to say that the size does not break my design, this happens after focusing on the textfield
Show us some code to help you out.
In any case, it might make sense to wrap the layout in a SingleChildScrollView.
Here is a very good explanation.
https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
yourAlertDialog(
context: context,
builder: (BuildContext context) {
return SingleChildScrollView(child: yourchild);
},
);
Your layout should be wrapped in Scrollview , I didn't replicate or run this code but it should be like this:
AlertDialog(
title: Text("title", style: TextStyle(color: ThemeColors.colorPrimary),),
content: Container(
width: double.maxFinite,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: StatefulBuilder(builder: (BuildContext context1, StateSetter setState) {
this.setState = setState;
return Container(
height: 340,
child: Column(
children: <Widget>[
//your container
],
),
),
}),
)),
);

i need an horizontal and an vertical listView builder in the same page. horizontal at the top and vertical listview at the bottom

This is my code. i need an vertical listview at the top and an horizontal listview at the bottom. top listview shouldn't move with the bottom horizontal listview. My app freezes when i go to this page. i need to stop the main.dart and restart the app.i need a screen something like this. what should i do
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_ecommerce_app/common_widget/BottomNavBarWidget.dart';
import 'package:flutter_ecommerce_app/screens/ShoppingCartPage(p).dart';
class ExpanPrdCat extends StatefulWidget {
#override
_ExpanPrdCatState createState() => _ExpanPrdCatState();
}
class _ExpanPrdCatState extends State<ExpanPrdCat> {
bool isLoading = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
centerTitle: true,
title: Text('Vegetables'),
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back_ios_rounded),
),
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.search),
color: Color(0xFF323232),
),
],
),
// bottomNavigationBar: BottomNavBarWidget(),
body: Container(
child: Column(children: [
Container(
height: 90,
child: Padding(
padding:
const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, index) {
return categoryItemsTabs(index);
},
itemCount: 5,
)),
),
),
Container(
child: ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
)
]),
),
);
}
//==================================================
categoryItemsTabs(int index) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 3),
height: 40,
width: 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/broccoli-in-a-pile-royalty-free-image-593310638-1564523257.jpg"),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.4), BlendMode.darken)),
borderRadius: BorderRadius.circular(15)),
),
Container(
alignment: Alignment.center,
child: Text(
"Organic",
style: TextStyle(
color: Colors.white, fontSize: 15, fontWeight: FontWeight.bold),
),
),
],
);
}
cartItems(int index) {
return Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey[300],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
"https://economictimes.indiatimes.com/thumb/height-450,width-600,imgsize-111140,msid-72862126/potato-getty.jpg?from=mdr"),
fit: BoxFit.cover)),
),
Padding(
padding: const EdgeInsets.only(left: 15, top: 15),
child: Row(
children: [
Container(
width: 160,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"potato",
style: TextStyle(
fontSize: 25,
),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Text(
"malayalam name",
style: TextStyle(fontSize: 20),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Column(
children: [
Text("price"),
],
)
],
),
),
],
),
),
Row(
children: [
Column(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(05)),
height: 20,
child: DropdownButton<String>(
icon: Icon(Icons.keyboard_arrow_down),
underline: SizedBox(),
hint: Text("choose"),
items: ['1 Kg', '2Kg'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
),
),
SizedBox(
height: 50,
),
Row(
children: [
Container(
height: 20,
width: 70,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.blue,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartScreen()),
);
},
child: Text(
" Add",
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w800),
),
),
)
],
)
],
),
],
)
],
),
),
),
)
],
);
}
}
Just add physics: ClampingScrollPhysics(), in your ListView.builder properties.
Example:
Container(
child: ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
)
You can do it using SingleChildScrollView :
for horizontal scrolling
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [],
),
),
for vertical scrolling
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [],
),
),
return Scaffold(
appBar: AppBar(....),
body: Container(
child: Column(children: [
Container(
height: 90,
width: MediaQuery.of(context).size.width,
child: Padding(
padding:
const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return categoryItemsTabs(index);
},
itemCount: 5,
),
),
),
),
Expanded(
child: Container(
child: ListView.builder(
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
),
)
]),
),
);

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,
),
],
),