how to Prevent Future Builder form multiple callings - flutter

I use from Future Builder to get some of my needed data like images for my listview but the getimage functaion called multiple times, how coud i prevent it?
the getimage functaion is called from build i know its wrong but i must pass the carUserId to function and i cant pass it if i call get image
outside the build so what shoud i do?
i called getimage function in initState but it didn't solve my problem in this way the images are not appears at all
heare is my code
my getimage function
Future<String> getimage(carUserId) async {
var res = await carobj.getAdData(carUserId);
return (res.data() as Map)['imgPro'].toString();
}
I get image heare:
child: FutureBuilder<String>(
future: _imageFuture,
builder: (context, AsyncSnapshot<String> snapshot) {
if (snapshot.data == null) {
return Container(
width: 60,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(
"https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg",
scale: 0.9),
fit: BoxFit.fill)),
);
} else {
String usersImg = snapshot.data.toString();
return Container(
width: 60,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(
usersImg != null
? (usersImg)
: ("https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg"),
scale: 0.9),
fit: BoxFit.fill)),
);
}
}),
my list widget:
Widget build(BuildContext context) {
Widget? showCarsList() {
if (cars != null) {
return ListView.builder(
itemCount: cars!.docs.length,
padding: EdgeInsets.all(8),
itemBuilder: (context, index) {
carUserId = (cars!.docs[index].data() as Map)['uId'];
_mFuture = getNumber();
_imageFuture = getimage(carUserId);
return Card(
child: Column(
children: [
ListTile(
leading: GestureDetector(
onTap: () {},
child: FutureBuilder<String>(
future: _imageFuture,
builder: (context, AsyncSnapshot<String> snapshot) {
if (snapshot.data == null) {
return Container(
width: 60,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(
"https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg",
scale: 0.9),
fit: BoxFit.fill)),
);
} else {
String usersImg = snapshot.data.toString();
return Container(
width: 60,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(
usersImg != null
? (usersImg)
: ("https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg"),
scale: 0.9),
fit: BoxFit.fill)),
);
}
}),
),
title: GestureDetector(
onTap: () {},
child: Text((cars!.docs[index].data() as Map)['username']
.toString()),
),
subtitle: GestureDetector(
onTap: () {},
child: Row(
children: [
((cars!.docs[index].data() as Map)['carLocation'] !=
null)
? Text(
(cars!.docs[index].data()
as Map)['carLocation'],
style: TextStyle(
color: Colors.black.withOpacity(0.6)))
: Text("unknown",
style: TextStyle(
color: Colors.black.withOpacity(0.6))),
SizedBox(
width: 4.0,
),
Icon(
Icons.location_pin,
color: Colors.grey,
)
],
),
),
trailing: (cars!.docs[index].data() as Map)['uId'] == userId
? Row(
mainAxisSize: MainAxisSize.min,
children: [
GestureDetector(
onTap: () {},
child: Icon(Icons.edit),
),
SizedBox(
width: 20,
),
GestureDetector(
onDoubleTap: () {},
child: Icon(Icons.delete_forever),
),
],
)
: Row(
mainAxisSize: MainAxisSize.min,
children: [],
),
),
Padding(
padding: EdgeInsets.all(16),
child: Image.network((cars!.docs[index].data() as Map)['urlImage']!=null
? ((cars!.docs[index].data() as Map)['urlImage'].toString()): ("https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg"),
fit: BoxFit.fill,
),
),
Padding(
padding: EdgeInsets.only(left: 10),
child: Text('\$'+(cars!.docs[index].data() as Map)['carPrice'].toString()
,style:TextStyle(fontFamily: "oleo",letterSpacing: 2,
fontSize: 24) ,
),
),
Padding(padding: EdgeInsets.only(left: 15,right: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(Icons.directions_car),
Padding(padding: EdgeInsets.only(left: 10),
child: Align(
child: Text((cars!.docs[index].data() as Map)['carModel'].toString(),
),
alignment: Alignment.topLeft,
),
)
],
),
Row(
children: [
Icon(Icons.watch_later_outlined),
Padding(padding: EdgeInsets.only(left: 10),
child: Align(
child: Text(tAgo.format((cars!.docs[index].data() as Map)['time'].toDate()),
),
alignment: Alignment.topLeft,
),
),
],
),
],),
),
SizedBox(height: 10,),
Padding(padding: EdgeInsets.only(left: 15,right: 15,bottom: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(Icons.brush_outlined),
Padding(padding: EdgeInsets.only(left: 10),
child: Align(
child: Text((cars!.docs[index].data() as Map)['carColor'].toString()),
alignment: Alignment.topLeft,
),
),
],
),
FutureBuilder( future: _mFuture,
builder: (context, AsyncSnapshot snapshot){
if (snapshot.hasData) {
String userNumbers = snapshot.data.toString();
return Row(
children: [
Icon(Icons.phone_android),
Padding(padding: EdgeInsets.only(left: 10),
child: Align(
child: Text(userNumbers.toString()),
alignment: Alignment.topLeft,
),
), ],
);
}else{
return Text("loading");
}
}
)
],
),
),
SizedBox(height: 10,),
Padding(padding: EdgeInsets.only(left: 15,right: 15),
child: Text((cars!.docs[index].data() as Map)['description'].toString(),
textAlign: TextAlign.justify,
style: TextStyle(
color: Colors.black.withOpacity(0.8)
),),
),
SizedBox(height: 10,)
],
),
);
},
);
}else{
return Text('Loading.....');
}
}
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.refresh, color: Colors.white),
onPressed: () {},
),
actions: [
TextButton(
onPressed: () {},
child: Padding(
padding: EdgeInsets.all(10),
child: Icon(
Icons.person,
color: Colors.white,
),
)),
TextButton(
onPressed: () {},
child: Padding(
padding: EdgeInsets.all(10),
child: Icon(
Icons.search,
color: Colors.white,
),
)),
TextButton(
onPressed: () {},
child: Padding(
padding: EdgeInsets.all(10),
child: Icon(
Icons.login_outlined,
color: Colors.white,
),
))
],
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blueAccent, Colors.redAccent])),
),
title: Text("home page"),
),
body: Center(
child: showCarsList(),
),
floatingActionButton: FloatingActionButton(
tooltip: 'add post',
child: Icon(Icons.add),
onPressed: () {
showDialogForAddingData();
},
),
);
}

Related

How to Create This Type of Two Button in the End of CupertinoActionSheet?

showCupertinoModalPopup(
context: context,
builder: (context) {
return CupertinoActionSheet(
actions: [],
title: Text("Sampark Tag"),
message: CupertinoSearchTextField(),
cancelButton: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: CupertinoActionSheetAction(
onPressed: () {}, child: Text("Cancel")),
),
CupertinoActionSheetAction(
onPressed: () {}, child: Text("Cancel"))
],
),
);
},
);
result needed https://i.stack.imgur.com/aHRBa.png
my screen https://i.stack.imgur.com/cK90U.png
if you want to build the same design you can do it with the following code
showModalBottomSheet<void>(
backgroundColor: Colors.transparent,
context: context,
builder: (BuildContext context) {
return Container(
height: 310,
margin: EdgeInsets.all(30),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
height: 250,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Sampark"),
CupertinoSearchTextField(),
const Text('Modal BottomSheet'),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () => Navigator.pop(context),
),
],
),
),
SizedBox(
height: 10,
),
Container(
child: Row(
children: [
Expanded(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.white,
),
child: TextButton(
onPressed: () {},
child: Text("Cancel"),
),
),
),
SizedBox(
width: 10,
),
Expanded(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.white,
),
child: TextButton(
onPressed: () {},
child: Text("Cancel"),
),
),
),
],
),
),
],
),
);
});
Check out the following image.
with little adjustment you can achieve the design you want.
Use below code
showCupertinoModalPopup(
context: context,
builder: (BuildContext context) =>
CupertinoActionSheet(
title:
const Text('Select Option'),
message:
const Text('Which option?'),
actions: <Widget>[
CupertinoActionSheetAction(
child: const Text('1'),
onPressed: () {
print('pressed');
},
)
],
cancelButton: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(
14),
color: Colors.black
.withOpacity(0.2),
),
child: Row(
children: [
Expanded(
flex: 5,
child: Container(
decoration:
BoxDecoration(
borderRadius:
BorderRadius
.circular(
14),
color: Colors.white
.withOpacity(
0.8),
),
child:
CupertinoActionSheetAction(
onPressed: () =>
Navigator.pop(
context),
isDestructiveAction:
true,
child: const Text(
'Cancel'),
),
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 5,
child: Container(
decoration:
BoxDecoration(
borderRadius:
BorderRadius
.circular(
14),
color: Colors.white
.withOpacity(
0.8),
),
child:
CupertinoActionSheetAction(
onPressed: () =>
Navigator.pop(
context),
child: const Text(
'Cancel'),
),
),
),
],
),
),
),
),

how to add a close icon to a container flutter

How to add a close icon to a container flutter. Appreciate your help on this.
showDialogFunc(context, img, cal, index, id, cid, status) {
final Size = MediaQuery.of(context).size;
return showDialog(
context: context,
builder: (context) {
return Center(
child: Material(
type: MaterialType.transparency,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
// color: backgroundBlue,
gradient: boxGradient,
),
padding: const EdgeInsets.only(top: 5, bottom: 5),
width: 350,
height: 350,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
img,
height: 250,
width: 250,
fit: BoxFit.contain,
),
],
),
),
),
),
);
},
);
}
You could use the AlertDialog widget and put the close button as part of the title by using a Column. You can place the close button in the top right corner using the alignment property in a Container and setting the titlePadding to zero.
Here is a very simple example:
void _showDialog() {
showDialog(
context: context,
builder: (context) => AlertDialog(
titlePadding: EdgeInsets.zero,
title: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
alignment: FractionalOffset.topRight,
child: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(Icons.clear),
),
),
const Text('Title'),
],
),
content: const Text('Message here'),
),
);
}
More info in Flutter docs:
AlertDialog
Alignment using FractionalOffset
You should have a look at the Stack widget. It lets you put more widgets, one over the others.
For instance:
Stack(
children: [
Align(
alignment: Alignment.topRight,
child: IconButton(
child: Icon(Icons.close),
onPressed: () => Navigator.of(context).pop()
)
),
Material(
//your code
),
]
)
Something like that should work
Please check the updated code as below with the output. If you want to make cancel button inside, change margin: const EdgeInsets.all(25)
showDialogFunc(context, img, cal, index, id, cid, status) {
return showDialog(
context: context,
builder: (context) {
return Center(
child: Material(
type: MaterialType.transparency,
child: Stack(
alignment: Alignment.topRight,
children: [
Container(
margin: const EdgeInsets.all(25),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.red,
// gradient: boxGradient,
),
padding: const EdgeInsets.only(top: 5, bottom: 5),
width: 350,
height: 350,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
img,
height: 250,
width: 250,
fit: BoxFit.contain,
),
],
),
),
),
InkWell(
onTap: (){
//perform action here.
},
child: Icon(
Icons.cancel,
color: Colors.white,
size: 50,
))
],
),
),
);
},
);
}
code snippet :
Stack(
children: [
//your code,
Positioned(
right: 10,
top: 10,
child: GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Align(
alignment: Alignment.topRight,
child: CircleAvatar(
key: const Key('closeIconKey'),
radius: 15,
backgroundColor: Colors.white,
child: Icon(
Icons.close,
color: Colors.red,
),
),
),
),
),
],
),

Alignment issues with Stack flutter

I have design that shows flash offers count but when i tried to design like the following image the alignment of widgets do not work properly. How do i approach this design? I have tried many codes but i am not getting the desired results.
The design i am trying to create
The design i did so far
Code
Widget FlashOffers(){
return GestureDetector(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FlashOfferListScreen(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Container(
height: 50,
width:350,
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))
),
),
Center(child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Flash Offers",style: TextStyle(fontSize: 18,color: Colors.white,fontWeight: FontWeight.bold),),
)),
Row(
// crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Stack(
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3")
],
),
],),
],
),
),
);
}
Try this: Remove your row widget and add alignment: Alignment.center to stack that is in the row. Wrap you Stack with Align Widget and add alignment: Alignment.centerRight
Widget flashOffers() {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Container(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Container(
height: 50,
width: 350,
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))),
),
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Flash Offers",
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
)),
Align(
alignment: Alignment.centerRight,
child: Stack(
alignment: Alignment.center,
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3")
],
),
),
],
),
),
);
}
You should consider adding the label and counter icon inside the container widget.
Your code should look something like this:
Widget flashOffers() {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FlashOfferListScreen(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 50,
width: 350,
padding: EdgeInsets.symmetric(horizontal: 16),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(8.0),
child: Text(
"Flash Offers",
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
),
Stack(
alignment: Alignment.center,
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3"),
],
)
],
),
),
),
);
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SafeArea(
child: Center(
child: flashOffers(),
),
),
),
);
}
Widget flashOffers() {
return GestureDetector(
onTap: () {
print('new route push');
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 350,
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFFc1202e),
Color(0xFFea2127),
],
begin: Alignment.topRight,
end: Alignment.bottomLeft,
),
borderRadius: BorderRadius.all(
Radius.circular(30),
),
boxShadow: [
BoxShadow(
blurRadius: 10,
offset: Offset(-10, 10),
color: Colors.black26,
),
]),
child: Row(
children: [
Expanded(
child: Text(
"Flash Offers".toUpperCase(),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Stack(
alignment: Alignment.center,
children: [
Icon(
Icons.folder,
size: 30,
color: Colors.yellowAccent,
),
Text(
'3',
style: TextStyle(color: Colors.red),
),
],
),
SizedBox(width: 10),
],
),
),
),
);
}
}
Here is the example without using Stack. Hope you will get the idea and it will help :-)
return MaterialButton(elevation: 8,
color: Colors.redAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0)
),
child: Row(children: [
Expanded(child: Text('FLASH OFFER', textAlign: TextAlign.center)),
CircleAvatar(
backgroundColor: Colors.yellow, radius: 12, child: Text("2"))
]),
onPressed: () {
print('button pressed');
});
Edit: To show the shadow, use the elevation property of button. You can also change the shadow color
You can use positioned,it is so useful in stack widget.
Look at this:
https://medium.com/codespace69/flutter-widget-positioning-eca4fea1528b#:~:text=A%20Stack%20allows%20you%20to,the%20children%20of%20a%20stack.
Try this
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.65,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
),
child: FlatButton(
splashColor: iconButton,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadiusDirectional.circular(20)),
color: primaryColor,
onPressed: () {
sendMail();
},
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(),
Text(
"Send",
style: styleText(
size: 20,
weight: FontWeight.bold,
color: white),
),
Container(
child: Center(
child: SvgPicture.asset(
ic_profileWhite,
height: 20,
width: 20,
),
),
),
],
),
),
),
),

how can i use SingleChildScrollView in my code flutter?

hello My code for a page is like this. i need to scroll part below appbar.
_sheetController =
_scaffoldKey.currentState.showBottomSheet<void>((BuildContext context) {
return
DecoratedBox(
decoration: BoxDecoration(color: Theme.of(context).canvasColor),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40.0), topRight: Radius.circular(40.0)),
child:
Container(
child:
ListView(
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Positioned(
left: 10,
top: 10,
child: IconButton(
onPressed: () {
_loading = false;
Navigator.of(context).pop();
},
icon: Icon(
Icons.close,
size: 30.0,
color: Theme.of(context).primaryColor,
),
),
)
],
),
height: 50,
width: 50,
),
Form(
key: _formKey,
autovalidate: _autoValidate,
child:SingleChildScrollView(child:
Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 140,
child: Stack(
children: <Widget>[
Positioned(
child: Align(
child: Container(
width: 130,
height: 130,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).primaryColor),
),
alignment: Alignment.center,
),
),
Positioned(
child: Container(
child: AutoSizeText(
"LOGIN",
maxLines: 1,
minFontSize:
MediaQuery.of(context).size.width/10.0,
maxFontSize:
MediaQuery.of(context).size.width/5.0,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
alignment: Alignment.center,
),
),
],
),
),
Padding(
padding: EdgeInsets.only(bottom: 20, top: 60),
child: CustomTextField(
onSaved: (input) {
_Email = input;
},
keyboardType: TextInputType.emailAddress,
validator: emailValidator,
icon: Icon(Icons.email),
hint: "EMAIL",
)),
CustomTextField(
icon: Icon(Icons.lock),
obsecure: true,
onSaved: (input) => _Password = input,
validator: (input) =>
input.isEmpty ? "*Required" : null,
hint: "PASSWORD",
),
Padding(
padding: EdgeInsets.only(right:
MediaQuery.of(context).size.width/1.96),
child: Container(
width: MediaQuery.of(context).size.width/2.310160428,
height: 40.0,
child:
FlatButton(
onPressed: resetSheet,
child: AutoSizeText("FORGOT PASWORD !" ,maxFontSize:
20.0,minFontSize: 10.0,maxLines: 1,),
),
)
),
SizedBox(
height: 10,
),
Padding(
padding: EdgeInsets.only(
left: 20,
right: 20,
bottom: MediaQuery.of(context).viewInsets.bottom),
child: _loading == true
? CircularProgressIndicator(
valueColor: new AlwaysStoppedAnimation<Color>(
Theme.of(context).primaryColor),
)
: Container(
child: filledButton(
"LOGIN",
Colors.white,
Theme.of(context).primaryColor,
Theme.of(context).primaryColor,
Colors.white,
_validateLoginInput),
height: 50,
width: MediaQuery.of(context).size.width,
),
),
SizedBox(
height: 20,
),
],
),
),
),
],
),
height: MediaQuery.of(context).size.height / 1.1,
width: MediaQuery.of(context).size.width,
color: Colors.white,
),
),
);
});
My code for a page is like this. i need to scroll part below appbar.
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(... ),
body: new Stack(
children: <Widget>[
new Container(
decoration: BoxDecoration(
image: DecorationImage(...),
new Column(children: [
new Container(...),
new Container(...... ),
new Padding(
child: SizedBox(
child: RaisedButton(..),
),
new Divider(),
new Column(
children: <Widget>[
new Container(
child: new Row(
children: <Widget>[
new Expanded(
child: new Text( ),
),
new IconButton(
icon: IconButton(..),
onPressed: () {
_changed(true, "type");
},
),
],
),
),
visibilityPropertyType
? new Container(
margin: EdgeInsets.all(24.0),
child: new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Expanded(... ),
new RaisedButton(..)
],
),
new Padding(
padding: const EdgeInsets.only(top: 10.0),
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
new Row(
children: <Widget>[.. ]),
new Row(
children: <Widget>[]),
new Row(
children: <Widget>[]),
new Row(
children: <Widget>[],
),
new Column(
children: <Widget>[
new Row(
children: <Widget>[],
),
],
),
],
),
),
],
))
: new Container(),
],
),
new Divider(
color: Colors.white,
)
])
],
),
);
}
I need to make body part scrollable. How can i implement that scroll.
I think the SingleChildScrollView must work here but doesn't may i have issues in my code i try for alot times to find error but don't any help ?

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