Im trying to do the layout below with flexible widgets so when the screen size changes the layout stays about the same but when I put a flexible widget around a column anything that I put in the column in not visible. What am I doing wrong?
Wanted Outcome
What I have
My code
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.black,
),
body: SafeArea(
child: Column(
children: [
Flexible(
flex: 9,
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.grey,
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(),
),
],
),
),
Flexible(
flex: 1,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.white),
),
)
],
),
),
);
}
}
Finish your work, you will get the thing you have asked
Provide child on container
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.grey,
),
child: SizedBox(
height: 50,
width: double.infinity,
),
),
),
Related
how to add margin in tow or more Container at one time
child: Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 100,bottom: 100),
child: Row(
children: [
Expanded(
child: Container(
margin: new EdgeInsets.all(10),
decoration: BoxDecoration(color: Colors.blueAccent),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(color: Colors.amber),
),
),
how to add margin in multiple container at one times or container warped in margin chilled
To do this you have to create a separate reusable widget like this:
class ReusableContainer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(10),
decoration: const BoxDecoration(color: Colors.blueAccent),
);
}
}
And then use that ReusableContainer widget like this:
Padding(
padding: const EdgeInsets.only(top: 100, bottom: 100),
child: Row(
children: [
Expanded(
child: ReusableContainer(),
),
Expanded(
child: ReusableContainer(),
),
],
),
),
I am trying to build a layout with basically 2 parts which one is scrollable and not the other. I have a button on the not scrollable one but it is not clickable
Here is the code
Scaffold(
body: Stack(
children: [
Container(
height: double.infinity,
decoration:
const BoxDecoration(color: AppColors.secondaryBackground),
child: const SafeArea(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: ReturnButton(),
),
),
),
SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(top: 150.0),
child: Container(
width: double.infinity,
decoration: const BoxDecoration(
color: AppColors.mainBackground,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25))),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20.0, vertical: 20.0),
child: Column(children: const []))),
),
)
],
),
);
try using Icon Button Instead, and provide it with the Icon and inPressed callback
IconButton(
iconSize: 72,
icon: const Icon(Icons.arrow_left),
onPressed: () {
// ...
},
),
here is my code i have run the code but no output show
Divider(thickness: 5),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Best Destination",
style: TextStyle(color: Colors.teal, fontSize: 20),
),
Text("SEE ALL")
],
),
),
GridView(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: [
Container(
color: Colors.blue,
margin: EdgeInsets.all(5),
),
Container(
color: Colors.blue,
margin: EdgeInsets.all(5),
),
Container(
color: Colors.blue,
margin: EdgeInsets.all(5),
),
Container(
color: Colors.blue,
margin: EdgeInsets.all(5),
),
Container(
color: Colors.blue,
margin: EdgeInsets.all(5),
),
],
),
Try wrapping GridView with Expanded when top level widget is Column
class GriVIssue extends StatelessWidget {
const GriVIssue({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Divider(thickness: 5),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Best Destination",
style: TextStyle(color: Colors.teal, fontSize: 20),
),
Text("SEE ALL")
],
),
),
Expanded(
child: GridView(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: [
Container(
color: Colors.blue,
margin: EdgeInsets.all(5),
),
Container(
color: Colors.blue,
margin: EdgeInsets.all(5),
),
Container(
color: Colors.blue,
margin: EdgeInsets.all(5),
),
Container(
color: Colors.blue,
margin: EdgeInsets.all(5),
),
Container(
color: Colors.blue,
margin: EdgeInsets.all(5),
),
],
),
),
],
),
);
}
}
Check more on this Unbounded height / width | Decoding Flutter
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 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: