I'm trying to develop a dashboard page, with 4 gridviews in a row and 2 gridviews in another row(image below). I'm trying to make the page scrollable and make it look like the image shown below:
I have developed the layout on flutter with code below:
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class Reporting extends StatefulWidget {
#override
_Reporting createState() => _Reporting();
}
class _Reporting extends State<Reporting> {
SfCartesianChart _getAnimationLineChart() {
return SfCartesianChart(
plotAreaBorderWidth: 0,
primaryXAxis: NumericAxis(majorGridLines: MajorGridLines(width: 0)),
primaryYAxis: NumericAxis(
majorTickLines: MajorTickLines(color: Colors.transparent),
axisLine: AxisLine(width: 0),
minimum: 0,
maximum: 100),
);
}
#override
Widget build(BuildContext context) {
;
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.grey.shade100,
),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CustomAppBar(),
Expanded(
child: Column(
children: <Widget>[
ListView(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
GridView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 6 / 3.5,
crossAxisCount: MediaQuery.of(context)
.size
.width >=
1300
? 4
: MediaQuery.of(context).size.width >= 700
? 2
: 1),
children: [
Card(
margin: EdgeInsets.all(20.0),
//margin: EdgeInsets.fromLTRB(80, 60, 80, 60),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Number Of Bugs",
style: TextStyle(
color: Colors.black, fontSize: 30.0),
),
Text(
"Critical, High, Info",
style: TextStyle(
color: Colors.green[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 30.0),
),
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
],
),
GridView(
shrinkWrap: true,
padding: EdgeInsets.only(
//top: 20.0,
left: 90.0,
right: 100.0),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 3 / 2,
crossAxisCount: MediaQuery.of(context)
.size
.width >=
1300
? 2
: MediaQuery.of(context).size.width >=
700
? 2
: 1),
children: <Widget>[
Card(
//margin: EdgeInsets.all(20.0),
//margin: EdgeInsets.fromLTRB(80, 60, 80, 60),
elevation: 3.0,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//mychart2Items("Conversion","0.9M","+19% of target"),
_getAnimationLineChart(),
],
),
),
Card(
//margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding:
const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 30.0),
),
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding:
const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding:
const EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
])
],
),
],
),
),
],
),
),
),
);
}
}
I'm getting an error and it is overflowing. Things that I have tried to make it scrollable are used SingleChildScrollView, added shrinkwrap, added scrollAxisDirection. But nothing seems to work. Can someone guild me on how to solve this problem.
A RenderFlex overflowed by 408 pixels on the bottom.
The relevant error-causing widget was:
Column file:///Users/akramkhan/Documents/cshweb/cshwebapp/lib/pages/Reporting.dart:43:24
════════════════════════════════════════════════════════════════════════════════════════════════════
I tried your code and you could remove a couple of widgets and start with this:
return Scaffold(
body: SingleChildScrollView(
child: Column(children: <Widget>[
GridView(),
GridView(),
]),
),
);
then you can disable scrolls on the grid views and add more things you need.
Hope this helps. Let me pls know if this solves your issue
Related
I would like to add the container with the "Total amount" at the bottom of my screen.
I tried with Alignment.bottom center, but nothing.
Right now, the listview.builder is smaller, and the container go just under.
I don't want to add padding, as i want something responsive for different screens sizes.
This is my code:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(...
),
body: Padding(
padding: const EdgeInsets.only(top: 15.0),
child: SingleChildScrollView(
child: Container(
height: MediaQuery
.of(context)
.size
.height * 0.9,
child: Column(
children: <Widget>[
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (contetx ,index) {
return Column(
children:[
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 15, right: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(child: Text(widget.newList[index].name,
style: TextStyle(fontWeight: FontWeight.bold),),
margin: EdgeInsets.only(left: 5.0),),
Container(child: Text((widget.newList[index].quantity),
style: TextStyle(fontSize: 18),)),
],
),
),
Divider(thickness: 1,indent: 20,endIndent: 20,),
],
);
},
itemCount: widget.newList.length,
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Total'.toUpperCase().tr(),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),),
Text( (widget.totalRecipe),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),),
],
),
Just use Spacer right before the Align. Also, use LayoutBuilder to get the remaining size instead of MediaQuery.of(context).size.height * 0.9,.
The code is going to be the following:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Results'),
backgroundColor: const Color.fromARGB(255, 237, 98, 55),
),
body: Padding(
padding: const EdgeInsets.only(top: 15.0),
child: LayoutBuilder(builder: (context, constraints) {
return SingleChildScrollView(
child: Container(
height: constraints.maxHeight,
child: Column(
children: <Widget>[
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (contetx, index) {
return Column(
children: [
Padding(
padding: const EdgeInsets.only(
top: 8.0, left: 15, right: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Text(
widget.newList[index].name,
style:
TextStyle(fontWeight: FontWeight.bold),
),
margin: EdgeInsets.only(left: 5.0),
),
Container(
child: Text(
(widget.newList[index].quantity),
style: TextStyle(fontSize: 18),
)),
],
),
),
Divider(
thickness: 1,
indent: 20,
endIndent: 20,
),
],
);
},
itemCount: widget.newList.length,
),
const Spacer(),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Total'.toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
Text(
(widget.totalRecipe),
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18),
),
],
),
),
),
],
),
),
);
}),
),
);
}
You can add mainAxisAlignment in Column() widget.
mainAxisAlignment: MainAxisAlignment.spaceBetween,
I'm kinda a loser when it comes to formatting and I've come to the conclusion I need a little guidance/advice. I have a ListView populated with cards that display data in them. Above this ListView I have the titles for the data in the ListView. Along with a search bar, but that shouldn't affect much. I'm having issues making the titles stay aligned with the data in the cards below, especially when switching between different devices since the screen size changes. What is the best way to do this? Any help and/or advice is highly appreciated!
This is an image of how it looks currently
This is the current code. I'm using a combination of flex and expanded for most of my formatting for moving the data & titles around.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
appBar: PreferredSize(
preferredSize: Size.fromHeight(95.0),
child: AppBar(
automaticallyImplyLeading: false, // hides leading widget
flexibleSpace: DataAppBar(onChanged: (newValue) {
setState(() {
newValue = newValue;
});
}),
),
),
body: StreamBuilder<dynamic>(
stream: DataDBProvider.dataDB.getData(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
List data = snapshot.data;
return Column(children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
flex: 1,
child: Container(
width: MediaQuery.of(context).size.width * .45,
height: MediaQuery.of(context).size.height * .05,
child: TextField(
controller: editingController,
decoration: InputDecoration(
labelText: "Search",
hintText: "Search",
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(25.0)))),
),)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
flex: 3,
child: Container(
child: Text(
"Date",
style: TextStyle(
color: Colors.green, fontFamily: 'Montserrat'),
),
)),
Flexible(
flex: 2,
child: Container(
alignment: Alignment.centerLeft,
child: Text(
"Item",
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.green, fontFamily: 'Montserrat'),
),
),
),
Flexible(
flex: 2,
child: Container(
alignment: Alignment.center,
child: Text(
"Amount",
maxLines: 1,
style: TextStyle(
color: Colors.green, fontFamily: 'Montserrat'),
),
),
),
]),
Expanded(
child: ListView.builder(
itemCount: data.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.symmetric(
vertical: 1.0, horizontal: 4.0),
child: InkWell(
onLongPress: () =>
_openUpdateDrawer(data[index]),
child: Card(
color: (index % 2 == 0) ? greycolor : Colors.white,
child: Container(
height: 60,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Flexible(
flex: 2,
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(
left: 5, top: 13),
child: AutoSizeText(
data[index].date,
maxFontSize: 12,
minFontSize: 7,
style: TextStyle(
color: Colors.black),
textAlign: TextAlign.left),
),
],
),
),
Flexible(
flex: 4,
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(
top: 13, left: 10),
child: Text(
data[index].title,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.black,
fontFamily: 'Montserrat'),
),
),
Row(
children: [
Flexible(
child: Padding(
padding:
EdgeInsets.only(left: 8),
child: AutoSizeText(
'${data[index].description}',
maxLines: 1,
style: TextStyle(
color: Colors.black,
fontStyle:
FontStyle.italic),
),
))
],
),
],
),
),
Expanded(
child: Row(
mainAxisAlignment:
MainAxisAlignment.end,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerLeft,
child: AutoSizeText(
'\$${data[index].amount}',
maxLines: 1,
style: TextStyle(
color: Colors.black),
textAlign: TextAlign.left),
)
],
),
)
],
)),
),
));
},
))
]);
}));
}
So you are adding extra padding in your elements in the listview that you need to add to the titles:
padding:
EdgeInsets.only(left: 6), // add margin to accomplish offsetting the labels the same as the items
So now in the titles you can add either padding or margin for 8 to the left. This only applies to the first two though. So for the final one you can do this:
Flexible(
flex: 2,
child: Container(
alignment: Alignment.end, // changed from center to end
margin: EdgeInsets.only(right:8), // add the right margin
child: Text(
"Amount",
maxLines: 1,
style: TextStyle(
color: Colors.green, fontFamily: 'Montserrat'),
also just a friendly piece of advice is that you are making this a whole lot more complicated on your self than needed. The above answers your question but I would consider trying to clean up your code so future questions/problems are easier to identify.
I'm new to Flutter and I'm trying to build my first app.
I want my HomePage to have a small image on the top and its content on the rest of the page. When scrolling, I want the image to behave like a Parallax effect, staying fixed and the grey ClipPath() widget scrolling over it.
I've already tried a few approaches and I'm not sure if I'm using the correct elements on this page but this was the only way I managed to position everything the way I wanted so far.
However, even using SingleChildScrollView() as this the Container/ClipPath() father, I still can't scroll the page.
Could you please help me with that? Thank you all.
// hope.page.dart:
import 'package:flutter/material.dart';
import 'package:remind_md/ui/shared/clippers/content.clipper.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarHeight: 40,
actions: <Widget>[
// action button
IconButton(
icon: Icon(Icons.notifications, color: Colors.white),
onPressed: () {
},
),
// action button
IconButton(
icon: Icon(Icons.settings, color: Colors.white),
onPressed: () {
},
),
],
),
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xff82d9e8), Color(0xff27acc1)],
begin: Alignment.bottomLeft,
end: Alignment.topRight
)
),
child: OverflowBox(
alignment: Alignment(-0.75,-1.05),
maxHeight: MediaQuery.of(context).size.height * 2,
child: Image.asset(
'images/home_doctors.png',
scale: 1.05,
),
)
),
Positioned(
top: MediaQuery.of(context).size.height*0.2 ,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
child: ClipPath(
clipper: ContentClipper(),
child: Container(
padding: EdgeInsets.only(top: 40),
width: MediaQuery.of(context).size.width,
color: Color(0xfff4f4f4),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 200,
height: 100,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Stack(
children: <Widget>[
Positioned(
right: 3,
top: 0,
child: Opacity(
opacity: 0.2,
child: Image.asset('images/card_calendar.png', width: 100, height: 75)
),
),
Positioned(
top: 0,
left: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'12 dias',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 26, color: Color(0xff27acc1))
),
Text(
'até próxima',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
Text(
'consulta.',
textAlign: TextAlign.justify,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
],
),
)
]
),
),
),
),
Container(
width: 200,
height: 100,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Stack(
children: <Widget>[
Positioned(
right: 3,
top: 0,
child: Opacity(
opacity: 0.2,
child: Image.asset('images/pill_case.png', width: 100, height: 75)
),
),
Positioned(
top: 0,
left: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'31 dias',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 26, color: Color(0xff27acc1))
),
Text(
'até comprar',
textAlign: TextAlign.left,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
Text(
'medicamento.',
textAlign: TextAlign.justify,
style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
),
],
),
)
]
),
),
),
)
],
),
Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Row(
children: <Widget>[
Container(
child: Image.asset('images/card_pills.png'),
height: 80,
width: 80,
decoration: BoxDecoration(
color: Color(0xfff47e71),
borderRadius: BorderRadius.all(Radius.circular(7))
),
)
],
),
),
Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Row(
children: <Widget>[
Container(
child: Image.asset('images/card_stet_heart.png'),
height: 80,
width: 80,
decoration: BoxDecoration(
color: Color(0xff3865b9),
borderRadius: BorderRadius.all(Radius.circular(7))
),
)
],
),
),
Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Text('Histórico', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 24, color: Color(0xff27acc1), ) ),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_credit_card.png'),
Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_credit_card.png'),
Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_pill.png'),
Text('30 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('images/list_pill.png'),
Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1) ) ),
],
),
Divider()
],
),
),
)
],
)
)
),
),
),
),
]
),
);
}
}
Wrap the SingleChildScrollView widget with an expanded widget. It should do the work. Because for the singleChildScrollView to work, it does not some height and width to scroll. Hope it helps.
I have this chat item similar to what you see on WhatsApp.
This is what I have so far.
ListView(
physics: BouncingScrollPhysics(),
children: [
Dismissible(
key: Key(""),
background: Container(color: Colors.grey[200]),
direction: DismissDirection.endToStart,
child: InkWell(
highlightColor: Colors.transparent,
onTap: () {},
child: Column(
children: [
Container(
child: Padding(
padding: EdgeInsets.all(16),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 12, 0),
child: CircleAvatar(
backgroundColor: Colors.blue,
radius: 30,
),
),
],
),
),
Flexible(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 4),
child: Text(
"John Doe",
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
),
),
),
Text(
"Lorem ipsum, or something idk about this",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.grey[800]
),
),
],
),
),
Flexible(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Padding(
// padding: EdgeInsets.fromLTRB(0, 0, 0, 4),
// child: Text(
// "John Doe",
// maxLines: 1,
// overflow: TextOverflow.ellipsis,
// style: TextStyle(
// fontSize: 16,
// ),
// ),
// ),
Container(
alignment: Alignment.topRight,
child: Text(
"12:02",
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.right,
style: TextStyle(
color: Colors.grey[800],
fontSize: 12,
),
),
),
],
),
),
],
),
padding: const EdgeInsets.all(0.0),
alignment: Alignment.center,
),
),
),
Divider(
color: Colors.grey[300],
height: 1,
indent: 90,
),
],
),
),
),
],
),
The list view is part of the body of a scaffold.
Currently only the middle part of this is the issue. And by issue I mean it is not flexing all the way. The right hand side where it says 12:02 should only expand if it has to otherwise minimum size should be applied. I am extremely lost.
Thanks for any help!
I have added this image to show what it looks like so far.
Try Expanded Widget
ListView(
physics: BouncingScrollPhysics(),
children: [
Dismissible(
key: Key(""),
background: Container(color: Colors.grey[200]),
direction: DismissDirection.endToStart,
child: InkWell(
highlightColor: Colors.transparent,
onTap: () {},
child: Column(
children: [
Container(
child: Padding(
padding: EdgeInsets.all(16),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 12, 0),
child: CircleAvatar(
backgroundColor: Colors.blue,
radius: 30,
),
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 4),
child: Text(
"John Doe",
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
),
),
),
Text(
"Lorem ipsum, or something idk about this",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Colors.grey[800]),
),
],
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
// Padding(
// padding: EdgeInsets.fromLTRB(0, 0, 0, 4),
// child: Text(
// "John Doe",
// maxLines: 1,
// overflow: TextOverflow.ellipsis,
// style: TextStyle(
// fontSize: 16,
// ),
// ),
// ),
Container(
alignment: Alignment.topRight,
child: Text(
"12:02",
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.right,
style: TextStyle(
color: Colors.grey[800],
fontSize: 12,
),
),
),
],
),
),
),
],
),
padding: const EdgeInsets.all(0.0),
),
),
),
Divider(
color: Colors.grey[300],
height: 1,
indent: 90,
),
],
),
),
),
],
),
Seems like there really isn't a good none hacky solution. It seems to work quite well with positions and a stack.
Here is the code.
Dismissible(
key: Key(""),
background: Container(color: Colors.grey[200]),
direction: DismissDirection.endToStart,
child: InkWell(
highlightColor: Colors.transparent,
onTap: () {},
child: Column(
children: [
Container(
child: Padding(
padding: EdgeInsets.fromLTRB(16, 16, 16, 12),
child: Container(
child: Stack(
children: [
Positioned(
top: 0,
right: 0,
child: Text(
"Mon",
style: TextStyle(
fontSize: 14,
color: Colors.grey[600]
),
),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(100))
),
child: Padding(
padding: EdgeInsets.fromLTRB(8, 4, 8, 4),
child: Text(
"123",
style: TextStyle(
color: Colors.white,
fontSize: 14,
),
),
),
),
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 12, 0),
child: CircleAvatar(
backgroundColor: Colors.blue,
radius: 30,
),
),
],
),
),
Flexible(
flex: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 4),
child: Text(
"John Doe",
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
),
),
),
Text(
"Lorem ipsumahskhdk ashkda ",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Colors.grey[800]),
),
],
),
),
SizedBox(
width: 60,
),
],
)
],
),
),
),
),
Divider(
color: Colors.grey[300],
height: 1,
indent: 90,
),
],
),
),
),
UI Layout
If the purple area is inside an Expanded widget, how would I go about to position the button? I've implemented that UI by setting a fixed height to the purple container but haven't been able to understand how to achieve the same effect if the height is variable, depending on the content.
I was able to get close by using Stack and Positioned widgets but then the button is not really clickable. If anyone can give me a general idea on how to achieve the desired goal I would be thankful.
Here's my attempt (demo case)
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 1,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.redAccent,
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Stack(
children: <Widget> [
Padding(
padding: const EdgeInsets.only(bottom: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.book,
color: Colors.white,
size: 40.0
),
Container(
width: 90.0,
child: new Divider(color: Colors.white),
),
Text(
"Some random text -",
style: TextStyle(color: Colors.white, fontSize: 25.0),
),
Padding(
padding: const EdgeInsets.only(top: 8.0, right: 70.0),
child: Row(
children: <Widget>[
Flexible(
child: Text(
'More random text that can vary a lot!',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
Text(
'Random text ',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
Text(
'Random',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
),
Positioned(
bottom: 0.0,
left: MediaQuery.of(context).size.width - 100.0,
child: FractionalTranslation(
translation: const Offset(0.0, 0.8),
child: FloatingActionButton(
backgroundColor: Colors.white,
foregroundColor: Colors.redAccent,
child: new Icon(
Icons.map
),
onPressed: () {
},
),
),
),
]
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 8.0),
child: Row(
children: <Widget>[
Flexible(
child: Text(
"Random text",
style: new TextStyle(
fontFamily: 'Raleway',
fontSize: 16.0,
color: Colors.black38
)
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Random text - long text",
style: new TextStyle(
fontFamily: 'Raleway',
fontSize: 18.0
)
),
),
],
)
],
)
),
),
],
);
Explaining what I described in the comments:
You can use the FractionalTranslation widget to shift your FAB half way down.
FractionalTranslation(translation: Offset(0, .5), child: FloatingActionButton(...))
This requires you to have it positioned at the bottom of the purple area (referring to your screenshot) beforehand, but I assume that you have that figured out.