I am trying to create this design.
.
My code
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"${DateFormat("hh:mm aa").format(DateTime.parse(requestDetails.goTime))}",
style: TextStyle(fontSize: 12),
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 3),
width: 8,
height: 8,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(15.0)),
),
Container(
margin: EdgeInsets.only(top: 3),
width: 4,
height: 4,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(15.0)),
),
Container(
margin: EdgeInsets.only(top: 3),
width: 4,
height: 4,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(15.0)),
),
Container(
margin: EdgeInsets.only(top: 3),
width: 4,
height: 4,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(15.0)),
),
],
),
Flexible(
child: Text(
"${requestDetails.goAddress} ${requestDetails.goAddress}${requestDetails.goAddress}",
overflow: TextOverflow.clip,
style: TextStyle(fontSize: 14),
),
),
],
)
All I got is this. I want that dots to expand as address lines increases. Or is there a better approach in implementing the same. Is there a plugin to help this screen? This whole widget comes inside a ListView widget. Trying to create this for almost 4 hours from now. Please help.
Wrap your Row with IntrinsicHeight widget and then wrap your widget that makes this dots shape with the Expanded widget.
So your item will be like this:
Widget _buildItem(String text) {
return IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [Text('01:59 AM'), Text('07:30 PM')]),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 7,
height: 7,
decoration: BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
),
),
Expanded(
child: Container(width: 2, color: Colors.grey),
),
Container(
width: 7,
height: 7,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
],
),
Text(text)
],
),
);
}
And here is the output UI:
The full code example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
padding: EdgeInsets.all(8),
children: [
_buildItem('''texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext'''),
Divider(
color: Colors.grey,
thickness: .5,
),
_buildItem('''texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext'''),
Divider(
color: Colors.grey,
thickness: .5,
),
_buildItem('''texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttext'''),
Divider(
color: Colors.grey,
thickness: .5,
),
_buildItem(
'''texttexttexttexttexttexttexttexttexttexttexttexttexttext'''),
],
));
}
Widget _buildItem(String text) {
return IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [Text('01:59 AM'), Text('07:30 PM')]),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 7,
height: 7,
decoration: BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
),
),
Expanded(
child: Container(width: 2, color: Colors.grey),
),
Container(
width: 7,
height: 7,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
],
),
Text(text)
],
),
);
}
}
This code snipped with a little bit of styling should achieve the design from the image. Good luck. :)
import 'package:flutter/material.dart';
void main() {
runApp(
MyApp(),
);
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: true,
home: Scaffold(
body: SafeArea(
child: ListView(
children: <Widget>[
getCard(),
getCard(),
getCard(),
getCard(),
getCard(),
getCard(),
getCard(),
getCard(),
],
))));
}
getCard() {
return Container(
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(
0, 64, 101, 0.15),
spreadRadius: 1,
blurRadius: 8,
offset: Offset(0,
2), // changes position of shadow
),
]),
padding: EdgeInsets.all(15),
height: 90,
width: double.infinity,
child: Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(
left: 5, right: 5),
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: <Widget>[
Text("01:53PM"),
Text("01:53PM"),
// Text(
// "7/1, 2nd block more adress etc."),
],
)),
Padding(
padding: EdgeInsets.only(
left: 5, right: 5),
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: 3),
child: getDot(true)),
getDot(false),
getDot(false),
getDot(false),
getDot(false),
Padding(
padding: EdgeInsets.only(
bottom: 3),
child: getDot(true)),
],
)),
Padding(
padding: EdgeInsets.only(
left: 5, right: 5),
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: <Widget>[
Text(
"333 Prospect St, Niagara Falls, NY 14303"),
Text(
"333 Prospect St, Niagara Falls, NY 14303"),
],
))
],
));
}
Widget getDot(bool isBig) {
return Container(
margin: EdgeInsets.only(top: 3),
width: isBig ? 8 : 4,
height: isBig ? 8 : 4,
decoration: BoxDecoration(
color: Colors.green,
borderRadius:
BorderRadius.circular(15.0)));
}
}
If you don't want to set a strictly fixed height (for example, a list can consist of either 1 element or 100 elements), you can do the following:
return ConstrainedBox(
constraints:
BoxConstraints(maxHeight: maxHeight),
child: ListView.builder(
shrinkWrap: true,
itemCount: count,
itemBuilder: (context, index) {
return Container(height: 20);
}));
In this case, you will only specify the maximum possible height, if your ListView is smaller, it will take its height, but it will not be greater than the height specified in constraints.
Related
I am trying to put some widgets in a row where the first widget should be square shaped and use the intrinsic width and height to modify the smaller one of these values so it results in a square shape. The side length should depend on the child widget, which is in my case a Text. Padding the text equally from all sides does not look right. I already tried achieving this with the AspectRatio widget and its working as far as it results in the expected square shape, but it does not use the minimal space but rather scales up as much as possible.
Any idea how to get this result without hardcoding the width and height?
example code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 100),
Text(' current status:'),
SizedBox(height: 5),
Row(
children: [
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.red.shade300,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.blue),
),
child: const Center(
child: Text(
'square',
textAlign: TextAlign.center,
),
),
),
SizedBox(width: 10),
Flexible(
child: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.blue.shade200,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.red),
),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'placeholder for other widgets',
style: Theme.of(context).textTheme.bodySmall,
),
],
),
),
),
],
),
SizedBox(height: 50),
Text(' I want this:'),
SizedBox(height: 5),
Row(
children: [
SizedBox(
height: 50,
child: AspectRatio(
aspectRatio: 1,
child: Container(
decoration: BoxDecoration(
color: Colors.red.shade300,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.blue),
),
child: Center(
child: Text(
'square',
textAlign: TextAlign.center,
),
),
),
),
),
SizedBox(width: 10),
Flexible(
child: Container(
height: 50,
decoration: BoxDecoration(
color: Colors.blue.shade200,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.red),
),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'placeholder for other widgets',
style: Theme.of(context).textTheme.bodySmall,
),
],
),
),
),
],
),
],
),
),
);
}
}
EDIT:
my code looks like this now
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final GlobalKey _key = GlobalKey();
double boxWidth = 0.0;
final String inputText = 'square';
#override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
BuildContext? keyContext = _key.currentContext;
if (keyContext != null) {
RenderBox renderBox = keyContext.findRenderObject() as RenderBox;
boxWidth = renderBox.size.width;
}
});
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 100),
Text(' input: $inputText'),
const SizedBox(height: 50),
const Text(' with StatefulWidget'),
const SizedBox(height: 10),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.all(10),
key: _key,
height: boxWidth,
decoration: BoxDecoration(
color: Colors.red.shade300,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.blue),
),
child: Center(
child: Text(
inputText,
textAlign: TextAlign.center,
),
),
),
const SizedBox(width: 10),
Flexible(
child: Container(
padding: const EdgeInsets.all(10),
height: boxWidth,
decoration: BoxDecoration(
color: Colors.blue.shade200,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.red),
),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'placeholder for other widgets',
style: Theme.of(context).textTheme.bodySmall,
),
],
),
),
),
],
),
const SizedBox(height: 50),
const Text(' with AspectRatio'),
const SizedBox(height: 10),
Row(
children: [
Flexible(
flex: 2,
child: AspectRatio(
aspectRatio: 1,
child: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.red.shade300,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.blue),
),
child: Center(
child: Text(
inputText,
textAlign: TextAlign.center,
),
),
),
),
),
const SizedBox(width: 10),
Flexible(
flex: 8,
child: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.blue.shade200,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.red),
),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'placeholder for other widgets',
style: Theme.of(context).textTheme.bodySmall,
),
],
),
),
),
],
),
],
),
),
);
}
}
This is how the different solution approaches behave:
You can achieve this using flexible and aspect ratio
Row(
children : [
Flexible(
flex: 2,
child: AspectRatio(
aspectRatio: 1,
Container(
color: Colors.red,
)
)
),
Flexible(
flex: 8,
child: Text(),
)
]
)
You can change the flex value as per your requirement
Edit
You can use intrinsic height in a row to set the child to the tallest child
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SizedBox(
width: MediaQuery.of(context).size.width,
child: IntrinsicHeight(
child: Row(children: [
AspectRatio(aspectRatio: 1, child: Container(color: Colors.red)),
Flexible(
child: Text(
"djdjdjdhjvc gf\nf bg \nhg hshs\nfjgdhjfhj \n hxhkj \n fjdjd d \n ejejdj "))
])));
}
}
you can do this:
GlobalKey _key = GlobalKey();
double boxWidth = 0.0;
#override
void initState() {
// TODO: implement initState
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
final _keyContext = _key.currentContext;
if (_keyContext != null) {
final box = _keyContext.findRenderObject() as RenderBox;
boxWidth = box.size.width;
}
});
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.all(10),
key: _key,
height: boxWidth,
decoration: BoxDecoration(
color: Colors.red.shade300,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.blue),
),
child: const Center(
child: Text(
'square',
textAlign: TextAlign.center,
),
),
),
SizedBox(width: 10),
Flexible(
child: Container(
padding: EdgeInsets.all(10),
height: boxWidth,
decoration: BoxDecoration(
color: Colors.blue.shade200,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.red),
),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'placeholder for other widgets',
style: Theme.of(context).textTheme.bodySmall,
),
],
),
),
),
],
),
],
),
),
);
}
Flutter - While importing listview widget from one file then it just throws an error on the app's screen "Bottom overflowed by 500 pixels" but when if listview is directly used inside the home file it works fine. only throws error while importing listview widget from another file.
Here is the home file and the file which has listview widget
import 'package:flutter/material.dart';
import 'package:flutter_application_1/Pages/widgets/exercise_list.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: const [
ExerciseList()
],
),
),
);
}
}
Second file
import 'package:flutter/material.dart';
class ExerciseList extends StatelessWidget {
const ExerciseList({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView(
shrinkWrap: true,
physics: const AlwaysScrollableScrollPhysics(),
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
),
],
);
}
}
Do this:
import 'package:flutter/material.dart';
class ExerciseList extends StatelessWidget {
const ExerciseList({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
//wrap your listview with a constraint widget: i.e container or SizedBox
//give it some height of your choice and wrap with SingleChildScrollview //widget to prevent the overflow from occuring
return Scaffold(
body: SingleChildScrollView(
child: SizedBox(
height:
MediaQuery.of(context).size.height, // takes screen full height
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
//choose direction of your choice
physics: const BouncingScrollPhysics(),
// scroll effects not the actual scrolling
children: List.generate(10, (index) =>Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
))
))),
);
}
}
in your main you don't need a column
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: const ExerciseList()
);
}
}
Try wrapping ExerciseList with SingleChildScrollView instead of Column:
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(20.0),
child: SingleChildScrollView(
child: ExerciseList(),
),
),
);
}
}
simply wrapped listview inside sizedbox and gave it a height of 150 and it's done we are good to go!☺☺
SizedBox(
child: ListView(
shrinkWrap: true,
physics: const AlwaysScrollableScrollPhysics(),
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(5),
width: 150,
height: 135,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: const Image(
image: NetworkImage(
"https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
),
const SizedBox(
height: 8,
),
const Text(
"Chest Workout",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 14),
)
],
),
),
),
],
),
],
));
I have this problem with scrolling, when I focus the text field the red container covers the Textfield, where i want to write.
How can I control the scrolling, so that the Textfield shows above the red container?
I want to show the red Container above the keabord, and when the user writes in the Textfield I want to activate the nect button.
enter image description here
enter image description here
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
FocusNode _focusNode = new FocusNode();
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Focus Example"),
),
body: Stack(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 9, // 90% of space => (6/(6 + 4))
child: LayoutBuilder(
builder: (context, constraint) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints:
BoxConstraints(minHeight: constraint.maxHeight),
child: IntrinsicHeight(
child: Column(
children: <Widget>[
new Container(
height: 800.0,
color: Colors.blue.shade200),
new TextFormField(
focusNode: _focusNode,
decoration: new InputDecoration(
hintText: 'Focus me!',
),
),
new Container(
height: 800.0,
color: Colors.blue.shade200),
],
),
),
),
);
},
)),
Expanded(
flex: 1, // 10% of space
child: Container(
color: Colors.purple,
alignment: Alignment.center,
),
),
],
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
height: 60,
color: Colors.red,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
child: Text("Back",
style:
TextStyle(color: Colors.white, fontSize: 18.0)),
onTap: () {}),
Container(
width: 40,
height: 40,
child: FlatButton(
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.white70,
padding: EdgeInsets.only(top: 0.0, bottom: 0.0),
splashColor: Colors.white,
onPressed: () {},
child: Icon(
Icons.navigate_next,
size: 35,
),
),
)
],
),
),
)
],
));
}
}
I could give you an idea. Try something like this,
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.9 - 60,
child: Row( ..... ), // Include SingleChildScrollView too
),
Container(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
height: 60,
child: Row( ... )
)
]
Hope that solves your issue.
I have a firstscreen called including stateful widget, PlantFeatureScreen1 where I have to show the change when the update occurs in thirdscreen which also includes a stateful widget, CartDetais3.
How can i update the first screen when changes happens in third screen and addQuantity and subtractQuantity functions will be added in third screen? Please suggest using provider package.
firstScreen code Here I have to show the change in very last center widget of this widget tree.
class PlantFeatureScreen1 extends StatefulWidget {
#override
_PlantFeatureScreen1State createState() => _PlantFeatureScreen1State();
}
class _PlantFeatureScreen1State extends State<PlantFeatureScreen1> {
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
TopAppBar(),
Expanded(
flex: 1,
child: Align(
alignment: Alignment(-1, 0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Text(
"Plants",
style: TextStyle(fontSize: 30, fontWeight: FontWeight.w700),
),
),
),
),
Expanded(
flex: 5,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blue,
),
child: DefaultTabController(
length: 5,
child: Column(
children: [
Container(
height: 50,
width: double.infinity,
child: TabBar(
isScrollable: true,
tabs: ourAllLists.tabMaker(),
),
),
Container(
height: 317,
width: double.infinity,
decoration: BoxDecoration(color: Colors.white),
child: TabBarView(
children: ourAllLists.tabViewerMaker(context),),),
],
),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
child: Container(
alignment: Alignment.bottomRight,
height: 120,
width: double.infinity,
child: Stack(
overflow: Overflow.visible,
children: [
Container(
height: 70,
width: 105,
decoration: BoxDecoration(
color: Color(0xFF96CA2D),
borderRadius: BorderRadiusDirectional.horizontal(
end: Radius.circular(32),
start: Radius.circular(32))),
child: Icon(FontAwesomeIcons.shoppingBag,color:Colors.white,size:30),
),
Positioned(
// top: 0,
bottom: 50,
right: 0,
child: Container(
height: 35,
width: 35,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
border: Border.all(color: Color(0xFF96CA2D),width: 4)
),
child: Center(child: Text(ourAllLists.totalquantity().toString(),style:TextStyle(fontSize: 20,color: Color(0xFF96CA2D)))),
),
)
],
),
),
)
],
);
}
}
thirdScreen code Here the update happens when the + or - icons get clicked.
class CartDetais3 extends StatefulWidget {
#override
_CartDetais3State createState() => _CartDetais3State();
}
class _CartDetais3State extends State<CartDetais3> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Padding(
padding: const EdgeInsets.fromLTRB(8, 20, 8, 15),
child: Column(
children: [
TopAppBar(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Cart",
style: kPlantNameStyle,
),
Text(
"\$" + "284",
style: kItemPrice,
),
],
),
Expanded(
child: ListView.builder(
itemCount: OurAllLists.cartPlantList3.length,
itemBuilder: (context, index) {
return Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 110,
width: 100,
child: Image(image: AssetImage("assets/tulip.png")),
),
Container(
height: 80,
width: 120,
child: Column(
children: [
Text(OurAllLists.cartPlantList3[index].pN),
Text(OurAllLists.cartPlantList3[index].ca
.toUpperCase()),
Text("\$ " +
OurAllLists.cartPlantList3[index].pr
.toString()),
],
),
),
Container(
height: 120,
child: Column(
children: [
FlatButton(
onPressed: () {
setState(() {
*here addQuantity function must go*
});
},
child: Icon(
FontAwesomeIcons.plus,
size: 20,
),
),
Text(OurAllLists.cartPlantList3[index].qu
.toString()),
FlatButton(
onPressed: () {
*here subtractQuantity function must go*
},
child: Icon(
FontAwesomeIcons.minus,
size: 20,
),
),
],
))
],
),
);
}),
)
],
),
),
)));
}
}
I have a also a seperate class called ViewTotallItemProvider
class ViewTotalItemProvider extends ChangeNotifier{
addQuantity(index){
OurAllLists.cartPlantList3[index].qu++;
notifyListeners();
}
subtrachQuantity(index){
OurAllLists.cartPlantList3[index].qu--;
}
}
I have been trying to replicate these two designs in Flutter using Stack, Positioned, Row, and similar related widgets, however, I've been getting stuck in the same stages again and again. I either can't center the text or cannot position the back button correctly. Also, I am trying not to use fixed sizes/positions as this is supposed to be somewhat adaptable to different screen sizes.
Could someone point me in the right direction, of how to create this or similar layouts, which would be reused in other screens?
Example 1:
Example 2:
For your example numero 1, I came with this solution:
class DetailScreen extends StatefulWidget {
#override
_DetailScreenState createState() => _DetailScreenState();
}
class _DetailScreenState extends State<DetailScreen> {
#override
Widget build(BuildContext context) {
return Material(
color: Colors.white,
child: SafeArea(
child: Stack(
fit: StackFit.expand,
children: [
Container(
margin: const EdgeInsets.all(5),
decoration: BoxDecoration(
color: Color(0xFF0B2746),
borderRadius: BorderRadius.circular(15),
),
child: Container(
margin: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 18),
child: Text(
'Glossary',
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 20,
),
),
)
],
),
),
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Card(
margin: const EdgeInsets.only(left: 0),
child: Padding(
padding: const EdgeInsets.all(12),
child: Icon(Icons.arrow_back_ios),
),
elevation: 6,
),
],
),
)
],
),
),
);
}
}
and the result is the following:
For your second example, I had to add extra logic:
class DetailScreen extends StatefulWidget {
#override
_DetailScreenState createState() => _DetailScreenState();
}
class _DetailScreenState extends State<DetailScreen> {
#override
Widget build(BuildContext context) {
return Material(
color: Colors.white,
child: SafeArea(
child: Stack(
fit: StackFit.expand,
children: [
Container(
margin: const EdgeInsets.all(5),
decoration: BoxDecoration(
color: Color(0xFF0B2746),
borderRadius: BorderRadius.circular(15),
),
child: Column(
children: [
Container(
height: 64.0,
width: double.infinity,
margin: const EdgeInsets.only(left: 54, right: 8, top: 8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: Row(
children: <Widget>[
SizedBox(width: 20),
Icon(Icons.train, size: 35),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 18),
child: Text(
'Metro',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 20,
),
),
),
),
Icon(Icons.arrow_drop_down, size: 35),
SizedBox(width: 20),
],
),
),
Expanded(
child: Container(
margin: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
)),
)
],
),
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Card(
margin: const EdgeInsets.only(left: 0),
child: Padding(
padding: const EdgeInsets.all(12),
child: Icon(Icons.arrow_back_ios),
),
elevation: 6,
),
],
),
)
],
),
),
);
}
}
and the result for this one is the follwing: