Related
This particular screen is composed of a large container (Height of screen) : This container is composed of three parts : A header (fixed container : 10% of screen size), a footer (fixed container : 10% of screen size) and a middle part : container : height of 80% of screen size.
I would like the middle container to be scrollable : so I inserted a LISTVIEW as the child of this container... but it keeps telling me I get a RenderFlex overflowed.... Why doesn't the content of the middle container scroll in between the header and the footer ??
Here is the code :
Scaffold(
backgroundColor: Colors.indigo[900],
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
automaticallyImplyLeading: false,
leading: IconButton(
icon: Icon(Icons.arrow_back_ios_rounded,
color: Colors.red[400], size: 25.0),
onPressed: () {
uD.clearSearchList();
Navigator.pushReplacementNamed(context, StudentHomeScreen.id);
}),
title: Text(
'ETAPE 1 - Découverte',
style: TextStyle(color: Colors.indigo[900], fontSize: 22),
),
actions: [
Container(
margin: const EdgeInsets.only(right: 10),
child: Icon(Icons.memory, size: 45, color: Colors.red[900]),
),
],
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.orange[50],
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: (MediaQuery.of(context).size.height) * 0.12,
padding: const EdgeInsets.fromLTRB(12, 12, 12, 0),
decoration: BoxDecoration(
color: Colors.orange[100],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Activité 1',
style: TextStyle(
color: Colors.red[900],
fontSize: 30,
fontWeight: FontWeight.bold),
),
Text(
'Mot n°1/24',
style: TextStyle(
color: Colors.indigo[900],
fontSize: 17.0,
),
),
],
),
SleekCircularSlider(
appearance: CircularSliderAppearance(
infoProperties: InfoProperties(
modifier: (reussite) {
return '${reussite.toInt()} / 5';
},
bottomLabelText: 'Réussite',
bottomLabelStyle:
TextStyle(fontSize: 12, color: Colors.red[900]),
),
size: 90,
customColors: CustomSliderColors(
progressBarColor: Colors.green[900]),
customWidths:
CustomSliderWidths(progressBarWidth: 8)),
min: 0,
max: 5,
initialValue: reussite <= 5 ? reussite : 5,
)
],
),
),
Container(
height: (MediaQuery.of(context).size.height) * 0.8,
child: ListView(
shrinkWrap: true,
children: [
Container(
padding: EdgeInsets.all(12.0),
margin: const EdgeInsets.only(top: 8),
child: Text(
'Ecoute et répète 5 fois le mot en anglais.',
style:
TextStyle(color: Colors.indigo[700], fontSize: 17),
),
),
Container(
margin: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width: 1.0,
),
borderRadius: BorderRadius.circular(10.0),
),
padding: const EdgeInsets.only(top: 16),
child: Row(
children: [
Container(
height: 200,
child: Image.asset(
'images/avatar_teacher.jpeg',
),
),
Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: Text(
'An adult',
style: TextStyle(
color: Colors.red[900],
fontSize: 23,
),
),
),
Container(
margin: const EdgeInsets.only(bottom: 60),
child: Text(
'Un adulte',
style: TextStyle(
color: Colors.indigo[900],
fontSize: 15,
),
),
),
GestureDetector(
child: Container(
height: 45,
margin:
EdgeInsets.fromLTRB(0, 5.0, 0, 15.0),
alignment: Alignment.topRight,
child: Icon(
Icons.volume_up,
color: Colors.indigo[500],
size: 55.0,
),
),
onTap: () {
Tts.speak(
phrase: 'little',
langue: Language.english);
},
),
Container(
alignment: Alignment.topRight,
child: Text('/adult/'),
),
],
),
),
],
),
),
Container(
height: 80,
margin: const EdgeInsets.symmetric(vertical: 20),
alignment: Alignment.center,
child: IconButton(
icon: Icon(
Icons.mic,
color: Colors.red[900],
size: 50,
),
onPressed: () async {
uD.checkSpokenWords('adult', reussite);
}),
),
Container(
alignment: Alignment.center,
child: Text(
'Clique sur le micro et répète le mot',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black45,
fontSize: 15.0,
),
),
),
SizedBox(
height: 50.0,
),
Container(
width: double.infinity,
alignment: Alignment.centerLeft,
margin: const EdgeInsets.only(top: 12),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width: 1.0,
),
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Text('Voici ce que j\'ai compris : '),
Text(uD.spokenWords),
],
),
),
),
],
),
),
Container(
height: (MediaQuery.of(context).size.height) * 0.08,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.orange[100],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
margin: const EdgeInsets.only(top: 8),
child: RoundedProgressBar(
milliseconds: 1000,
childLeft: Text(
'Réussite de l\'activité : ',
style: TextStyle(color: Colors.indigo[900]),
),
childRight: Text("$reussite%",
style: TextStyle(color: Colors.red[900])),
percent: reussite,
theme: RoundedProgressBarTheme.blue),
),
],
),
),
),
);
You should replace the middle Container (the one with the 0.8 * MediaQuery height) with Expanded so it will take the available space between the 2 other Containers.
I use standard tabs after a few of my blocks. The content in the tabs is styled using a container. The main parent element is Column in which I build all my blocks. I have tried various options using Expanded.
The error sometimes changes to "RenderFlex children have non-zero flex but incoming height constraints are unbounded." This only happens when i try to add tabs, any other block is displayed correctly in my main Column.
body: SafeArea(
child: SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/background.png"),
fit: BoxFit.fill,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: < Widget > [
SizedBox(height: 20),
Container(
margin: EdgeInsets.symmetric(horizontal: 15),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(32),
),
child: TextField(
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 14),
hintText: 'Найти услугу...',
suffixIcon: Icon(Icons.search),
border: InputBorder.none,
contentPadding:
EdgeInsets.symmetric(horizontal: 20, vertical: 15),
),
),
),
SizedBox(height: 20),
Container(
height: 450,
padding: EdgeInsets.only(top: 35),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/ps-bg.png"),
fit: BoxFit.cover,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: < Widget > [
SvgPicture.asset(
'assets/ps-logo.svg',
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.35,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(6, 85, 152, 0),
Color(0xFF084A82),
],
)
),
child: CarouselSlider(
options: CarouselOptions(
autoPlay: false,
aspectRatio: 16 / 10,
enlargeCenterPage: true,
viewportFraction: 0.6,
),
items: imgList.map((item) => LayoutBuilder(builder: (context, constraints) {
return ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(20.0),
),
child: Stack(
children: < Widget > [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(20.0),
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: < Widget > [
Image.asset(
'assets/psplus-1month.png',
fit: BoxFit.cover,
width: constraints.maxWidth,
height: constraints.maxHeight / 2,
),
SizedBox(height: 23),
Text(
'Playstation Plus',
textAlign: TextAlign.center,
style: TextStyle(
color: const Color(0xFF4F4F4F),
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 5),
Text(
'1 месяц',
style: TextStyle(
color: const Color(0xFFA5ABC8),
fontSize: 12,
),
),
SizedBox(height: 5),
Text(
'1 500 рублей',
style: TextStyle(
color: const Color(0xFF789EEB),
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
SizedBox(height: 5),
],
),
),
Positioned(
bottom: constraints.maxHeight / 2 - 18,
left: 0.0,
right: 0.0,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: < Widget > [
Container(
decoration: BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
blurRadius: 7,
color: Colors.black.withOpacity(0.10),
spreadRadius: 2)
],
),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 18,
child: Icon(Icons.add),
),
)
],
),
),
],
),
);
}, ), ).toList()
)
),
]
),
),
SizedBox(height: 20),
DefaultTabController(
length: 3,
child: Column(
children: [
Container(
margin: EdgeInsets.symmetric(horizontal: 15.0),
child: TabBar(
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(50), // Creates border
color: const Color(0xFF62A6E9)
),
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
labelStyle: TextStyle(fontSize: 13.0),
tabs: [
Tab(text: 'Инструкция'),
Tab(text: 'Оплаты'),
Tab(text: 'Информация'),
],
),
),
TabBarView(
children: [
Container(
margin: EdgeInsets.all(15.0),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(30))
),
child: Text(
'Text',
textAlign: TextAlign.left,
style: TextStyle(
color: const Color(0xFF4F4F4F),
height: 1.5,
fontSize: 15,
fontFamily: 'Montserrat',
fontWeight: FontWeight.w500,
),
),
),
Container(
margin: EdgeInsets.all(15.0),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(30))
),
child: Text(
'Text',
textAlign: TextAlign.left,
style: TextStyle(
color: const Color(0xFF4F4F4F),
height: 1.5,
fontSize: 15,
fontFamily: 'Montserrat',
fontWeight: FontWeight.w500,
),
),
),
Container(
margin: EdgeInsets.all(15.0),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(30))
),
child: Text(
'Text',
textAlign: TextAlign.left,
style: TextStyle(
color: const Color(0xFF4F4F4F),
height: 1.5,
fontSize: 15,
fontFamily: 'Montserrat',
fontWeight: FontWeight.w500,
),
),
),
],
),
]
)
),
GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
physics: ScrollPhysics(),
scrollDirection: Axis.vertical,
children: List.generate(10, (index) {
return Container(
child: Container(
margin: EdgeInsets.all(15.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(30.0)),
child: Stack(
children: < Widget > [
Image.network(
'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
fit: BoxFit.cover,
width: 1000.0),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: < Widget > [
Container(
decoration:
BoxDecoration(color: Colors.white),
padding: EdgeInsets.only(
top: 15.0,
bottom: 15.0
),
child: Text(
'PUBG',
textAlign: TextAlign.center,
style: TextStyle(
color: const Color(0xFF4F4F4F),
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
Positioned(
bottom: 40.0,
left: 0.0,
right: 0.0,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: < Widget > [
CircleAvatar(
backgroundColor: Colors.white,
radius: 15,
child: Icon(Icons.add),
),
],
),
),
],
)),
),
);
}),
),
]
)
)
))
Ok i found solution, TabBarView need height, Expanded not help.
Container(
height: MediaQuery.of(context).size.height,
child: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_car),
Icon(Icons.directions_car)
],
),
)
Wrap in LayoutBuilder:
LayoutBuilder(
builder: (_, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: Column(),
);
},
),
Flutter i have a column i am showing widgets in this. But there is one issue that container isn't showing in full screen there is some white black space remaining.
My code
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Header Image
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(podcastInfo.artworkUrl600),
fit: BoxFit.fill,
),
),
child: Container(
margin: EdgeInsets.only(left: 10, top: 15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CustomAppBar(),
Spacer(),
],
),
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: mainHeading(podcastInfo.trackName ?? ""),
),
//Group
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
// "Overhaul Media Group",
podcastInfo.artistName,
style: TextStyle(
fontSize: 14,
color: Color(0xFF969696),
fontFamily: "Product Sans",
),
),
),
model.loading
? Container(
height: 150,
child: Center(
child: SpinKitWave(
color: Color(0xffe7ad29),
type: SpinKitWaveType.center),
),
)
: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Subscribe button
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
RaisedButton(
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: Color(0xffe7ad29)),
),
onPressed: model.isSubscribed
? () {
model.unsubPodcast();
}
: () {
model.subscribePodcast();
},
child: Text(
model.isSubscribed
? "UNSUBSCRIBE"
: "SUBSCRIBE",
style: TextStyle(
color: Colors.white,
),
),
),
///
///Share Button
RaisedButton(
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: Color(0xffe7ad29)),
),
onPressed: () {
model.sharePodcast();
},
child: Text(
"SHARE",
style: TextStyle(
color: Colors.white,
),
),
),
],
),
),
//Body text
Padding(
padding: const EdgeInsets.only(
left: 8, right: 8, bottom: 8),
child: Container(
child: Text(
// "Podcast Overhaul was created to provide you with helpful hints, tips, & strategies you need to help you get the most out of your podcast every episode...ALL in 10 minutes or less.",
model.podcast.description ?? "",
style: TextStyle(
color: Color(0xFFB0ABAB),
fontSize: 15,
fontFamily: "Sogoe UI",
),
),
),
),
///Season
Container(
decoration: BoxDecoration(
color: Color(0xffe7ad29),
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20)),
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
SizedBox(
height:
MediaQuery.of(context).size.height *
0.02,
),
Container(
width:
MediaQuery.of(context).size.width,
padding: EdgeInsets.only(bottom: 6),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xFF707070),
),
),
),
child: mainHeading("EPISODES"),
),
Column(
children: model.podcast.episodes
.map<Widget>(
(e) => Container(
width: MediaQuery.of(context)
.size
.width,
padding: EdgeInsets.only(
bottom: 6, top: 10),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xFF707070),
),
),
),
child: GestureDetector(
onTap: () {
print('test');
print(podcastInfo);
print('debug');
print(e);
Navigator.pushNamed(
context,
'player',
arguments: new PlayerInfo(
item: podcastInfo,
episode: e,
),
);
},
child: mainHeading(e.title),
),
),
)
.toList(),
),
],
),
),
)
],
),
],
),
)
],
),
You can see in the screenshot its showing white empty space I try to wrap my yellow container in expanded but it's not working. I think I can sole by height but then it will scroll or some related issue will come.
Container(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Header Image
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(podcastInfo.artworkUrl600),
fit: BoxFit.fill,
),
),
child: Container(
margin: EdgeInsets.only(left: 10, top: 15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CustomAppBar(),
Spacer(),
],
),
),
),
You can wrap column in in container and give a height using media query. On overflow you can use SinglechildScrollView also.
I am running into issues pushing down the listview out of view of the draggablescrollablesheet (sheet) while still being able to scroll the sheet. So in simpler words I do not want the blue container to show up when the sheet is at the bottom.
I have tried to edit the height of the listview container and that makes it go offscreen therefore unscrollable.
I have also tried wrapping the sheet in a singlechildscrollview with no luck. I am trying to avoid using a button at all possible costs!
import 'package:flutter/material.dart';
import 'package:photosgroup2/chat/message_model.dart';
import 'package:photosgroup2/chat/user_model.dart';
class FeedTest extends StatefulWidget {
FeedTest({Key key}) : super(key: key);
#override
_FeedTest createState() => _FeedTest();
}
class _FeedTest extends State<FeedTest> {
_buildMessage(
Message message,
User user,
) {
//Reply reply){
String time= message.time;
return Container(
// color: Colors.yellow,
child: Padding(
padding: EdgeInsets.only(left: 0), //5
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: 5 ,top: 3.5), //10
child: new CircleAvatar(
radius: (17.5),
backgroundImage: AssetImage(
user.profilePic,
),
),
),
SizedBox(
width: 5,
),
Container(
//width: MediaQuery.of(context).size.width,
// width: 300,
child: Material(
color:Color(0x00000000) , //TRANSPARENT
//color: const Color(0xf2ffffff),
///Color(0xe6ffffff) // ! REVISIT Change color of boxes???
/*borderRadius: BorderRadius.only(
topRight: Radius.circular(16.0),
bottomRight: Radius.circular(16.0),
bottomLeft: Radius.circular(16.0),
),*/
child: Padding(
padding: EdgeInsets.only(
left: 10.0), //Revisit
child: Column(
//mainAxisSize: MainAxisSize.min,
mainAxisSize: MainAxisSize.min,
//crossAxis
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 5,
),
Text(
user.name,
style: TextStyle(
fontFamily: 'Lato-Bold',
fontSize: 13 ,
color: const Color(0xd9343f4b),
),
textAlign: TextAlign.left,
),
SizedBox(width: 8),
Padding(
padding: const EdgeInsets.only(left:8.0),
child: Text(
'$time hours ago',
style: TextStyle(
fontFamily: 'Lato',
fontSize: 12 ,
color: const Color(0xff5a6978),
),
textAlign: TextAlign.left,
),
),
SizedBox(
height: 5,
),
//SizedBox(height: 10,),//if(message.imageUrl!='') {
//hasReplies(message, user, reply)
//},
//}
],
),
),
),
),
],
),
SizedBox(height:5),
Container(
//color:Colors.blue,
//: EdgeInsets.only(right:10
//right: 10 * SizeConfig.widthRatio,
//),
child: Container(
//color: Colors.green,
margin: EdgeInsets.only(left:5,right:15),
child: Text(
message.text,
style: TextStyle(
fontFamily: 'Lato',
fontSize: 13 ,
color: const Color(0xff5a6978),
height: 1.5384615384615385
),
textAlign: TextAlign.left,
),
),
),
SizedBox(//color:Colors.amber,
height:15),
Transform.translate(
offset: Offset(-6,0),
child: Container(
width: 350.0,
height: 0.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(1.0),
color: const Color(0x40343f4b),
),
),
),
SizedBox(//color:Colors.amber,
height:5),
],
),
),
);
}
#override
Widget build(BuildContext context) {
// visibility of reply button in top right corner
return Scaffold(
backgroundColor: const Color(0xfffafafa),
body: SafeArea(
bottom: false,
top: false,
child: //Column(
//mainAxisAlignment: MainAxisAlignment.spaceAround,
//children: <Widget>[
Stack(
children: <Widget>[
DraggableScrollableSheet(
initialChildSize: 0.068,
minChildSize: 0.068,
maxChildSize: 0.71,
builder: (context, scrollController) {
return Container(
//padding: EdgeInsets.symmetric(horizontal: 20),
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(32),
topRight: Radius.circular(32),
),
child: Container(
width: 375, //screen width
height: 812 * 0.71, //screen height *
color: Color(0xffdfdfdf),
),
),
),
Stack(
children: [
Padding(
padding: const EdgeInsets.only(left: 10, top: 20.0),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(27.5),
topRight: Radius.circular(27.5),
),
child: Container(
//margin: EdgeInsets.only(),
width:340,
//height: 515,
color: Colors.yellow,
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(27.5),
topRight: Radius.circular(27.5),),
child: Container(
// padding: EdgeInsets.only(top:40),
color: Colors.blue,
child: ListView.builder(
//reverse: true,
controller: scrollController,
itemCount: comments.length,
itemBuilder: (BuildContext context, int index) {
final User messenger = comments[index].sender;
final Message message = comments[index];
//final Reply reply = replies[index];
return Column(children: <Widget>[
_buildMessage(
message,
messenger,
), //reply),
SizedBox(
height: 8,
) // !COME BACK TO SPACE BETWEEN
]);
},
),
),
),
),),
),
],
),
Stack(
children: <Widget>[
//67
Padding(
padding: EdgeInsets.only(left: 141, top: 6),
child: SizedBox(
width: 93.0,
height: 29.0,
child: Stack(
children: <Widget>[
SizedBox(
width: 93.0,
height: 29.0,
child: Stack(
children: <Widget>[
// Adobe XD layer: 'Rectangle' (shape)
Container(
width: 93,
height: 29.0,
child: Padding(
padding: EdgeInsets.only(
left: 1, top: 6),
child: Text(
'Place Holder',
style: TextStyle(
fontFamily: 'Lato',
fontSize: 12,
color: const Color(0xffffffff),
),
textAlign: TextAlign.center,
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(27.5),
color: const Color(0xf2343f4b),
),
),
],
),
),
],
),
),
),
],
),
],
),
);
},
),
],
),
// ],
//),
),
);
}
}
In my flutter app I have a GridView in which I list cards. In the cards I want to have an image and some text. I am trying to do this as follows:
import 'package:flutter/material.dart';
class Home extends StatefulWidget{
#override
State<StatefulWidget> createState() {
return HomeState();
}
}
class HomeState extends State<Home>{
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.green,
Colors.teal,
]
)
),
),
Padding(
padding: const EdgeInsets.only(top: 65),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white60, width: 2.0)
),
padding: EdgeInsets.all(8),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(Icons.restaurant, size: 120,),
),
),
]
),
SizedBox(
height: 8,
),
Text(
"Genesis Technologies",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white
),
),
SizedBox(
height: 6,
),
Text(
"Please take the following precautions",
style: TextStyle(
fontSize: 16,
color: Colors.white70
),
),
],
),
),
Container(
margin: EdgeInsets.only(top: 350),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
)
),
),
Container(
margin: EdgeInsets.only(top: 250),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30)
)
),
child: Padding(
padding: EdgeInsets.all(0),
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: <Widget>[
Container(
height: 200,
width: 100,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Cover your mouth and nose when yous sneeze or cough",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Avoid touching your face with unwashed hands",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Stay home if you don't need to get out for critical matters",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
],
)
),
),
],
),
),
),
);
}
}
And this renders the list of cards fine. My problem is that the cards bottom is being overflowed. I wrap the card in a container to fix this which looks like the follows:
Container(
height: 200,
width: 100,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Some text here",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
),
I don't understand why this is happening. Any help would be appreciated. Thanks.
ok... I usual don't do that but I had to rework the whole structure because most of the things didn't make any sense. Now I don't really understand.. Why do you want cards to increase size to not overflow.. Did you mean decrease size? The cards in your grid view will be always the same because you use grid view. You have set crossAxisCount to 2 so 2 items in x axis and square.. If you add more, then on smaller screen they will be accessible by scrolling and will not overflow. I have set position of the container where you have all your cards from the top to 1/3 of the screen height which perhaps is better then hardcoding it to fixed size as you had. Try it and let me know if you need to adjust it in any other way.
UPDATE
Scaffold(
body: Column(children: [
Flexible(
flex: 2,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.green,
Colors.teal,
])),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: FractionallySizedBox(
heightFactor: 0.5,
child: Container(
width: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
border:
Border.all(color: Colors.white60, width: 2.0)),
padding: EdgeInsets.all(8),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(
Icons.restaurant,
),
),
),
),
),
SizedBox(
height: 8,
),
Text(
"Genesis Technologies",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white),
),
SizedBox(
height: 6,
),
Text(
"Please take the following precautions",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: Colors.white70),
),
],
),
),
),
Flexible(
flex: 3,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.green,
Colors.teal,
])),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30))),
child: Padding(
padding: EdgeInsets.all(0),
child: GridView(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
children: <Widget>[
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Cover your mouth and nose when yous sneeze or cough",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Avoid touching your face with unwashed hands",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Stay home if you don't need to get out for critical matters",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
],
)),
),
),
),
]),
);