Develop Reference

Padding in ListView Flutter

why I still got error?
import 'package:flutter/material.dart';
import 'package:kosan2_apps/tema.dart';
import 'package:kosan2_apps/widgets/facilities_item.dart';
class DetailPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: whiteColor,
body: SafeArea(
bottom: false,
child: Stack(children: [
Image.asset(
'assets/images/cover.png',
width: MediaQuery.of(context).size.width,
height: 350,
fit: BoxFit.cover,
),
ListView(
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
vertical: 30,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Image.asset(
'assets/images/btn_back.png',
width: 40,
),
),
Image.asset(
'assets/images/btn_wishlist.png',
width: 40,
),
],
),
),
children: [
SizedBox(
height: 328,
),
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
color: whiteColor,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
),
//NOTE TITLE
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Danau Toba Village',
style: blackTextStyle.copyWith(
fontSize: 22,
),
),
SizedBox(
height: 2,
),
Text.rich(
TextSpan(
text: '\$52',
style: purpleTextStyle.copyWith(
fontSize: 16,
),
children: [
TextSpan(
text: '/ month',
style: greyTextStyle.copyWith(
fontSize: 16,
),
),
],
),
),
],
),
Row(
children: [
Image.asset(
'assets/images/icon_star.png',
width: 20,
),
SizedBox(
width: 2,
),
Image.asset(
'assets/images/icon_star.png',
width: 20,
),
SizedBox(
width: 2,
),
Image.asset(
'assets/images/icon_star.png',
width: 20,
),
SizedBox(
width: 2,
),
Image.asset(
'assets/images/icon_star.png',
width: 20,
),
SizedBox(
width: 2,
),
Image.asset(
'assets/images/icon_star.png',
width: 20,
color: Color(0xff989BA1),
),
],
),
],
),
),
SizedBox(
height: 30,
),
//NOTE MAIN FACILITIES
Padding(
padding: EdgeInsets.only(
left: edge,
),
child: Text(
'Main Facilities',
style: regularTextStyle.copyWith(
fontSize: 16,
),
),
),
SizedBox(
height: 12,
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FacilitiesItem(
name: 'Kitchen',
imgUrl: 'assets/images/icon_kitchen.png',
totalItem: 2,
),
FacilitiesItem(
name: 'Bedroom',
imgUrl: 'assets/images/icon_bedroom.png',
totalItem: 3,
),
FacilitiesItem(
name: 'Big Cupboard',
imgUrl: 'assets/images/icon_cupboard.png',
totalItem: 4,
),
],
),
),
SizedBox(
height: 30,
),
//NOTE PHOTOS
Padding(
padding: EdgeInsets.only(left: edge),
child: Text(
'Photos',
style: regularTextStyle.copyWith(
fontSize: 16,
),
),
),
SizedBox(
height: 12,
),
Container(
height: 88,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 24,
),
Image.asset(
'assets/images/photo1.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
SizedBox(
width: 18,
),
Image.asset(
'assets/images/photo2.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
SizedBox(
width: 18,
),
Image.asset(
'assets/images/photo3.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
],
),
),
SizedBox(
height: 30,
//NOTE LOCATION
),
Padding(
padding: EdgeInsets.only(left: edge),
child: Text(
'Location',
style: regularTextStyle.copyWith(
fontSize: 16,
),
),
),
SizedBox(
height: 6,
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Jln Seto Lrg.Sipirok No.23\nMedan',
style: greyTextStyle,
),
Image.asset(
'assets/images/btn_location.png',
width: 40,
)
],
),
),
SizedBox(
height: 40,
),
Container(
margin: EdgeInsets.symmetric(
horizontal: edge,
),
height: 50,
width: MediaQuery.of(context).size.width - (2 * edge),
child: ElevatedButton(
onPressed: () {},
child: Text(
'Book Now',
style: TextStyle(
color: whiteColor,
fontSize: 18,
),
),
style: ButtonStyle(
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),
),
),
backgroundColor: MaterialStateProperty.resolveWith(
(states) {
return purpleColor;
},
),
),
),
),
SizedBox(
height: 40,
),
],
),
)
],
)
]),
),
);
}
}
Can anyone fix it?

You need to place Padding inside the children
class DetailPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: whiteColor,
body: SafeArea(
bottom: false,
child: Stack(children: [
Image.asset(
'assets/images/cover.png',
width: MediaQuery.of(context).size.width,
height: 350,
fit: BoxFit.cover,
),
ListView(
children: [
Padding( //here
padding: EdgeInsets.symmetric(
horizontal: edge,
vertical: 30,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Image.asset(
'assets/images/btn_back.png',
width: 40,
),
),
Image.asset(
'assets/images/btn_wishlist.png',
width: 40,
),
],
),
),
SizedBox(
height: 328,
),
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
// color: whiteColor,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
),
//NOTE TITLE
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Danau Toba Village',
// style: blackTextStyle.copyWith(
// fontSize: 22,
// ),
),
SizedBox(
height: 2,
),
Text.rich(
TextSpan(
text: '\$52',
// style: purpleTextStyle.copyWith(
// fontSize: 16,
// ),
children: [
TextSpan(
text: '/ month',
// style: greyTextStyle.copyWith(
// fontSize: 16,
// ),
),
],
),
),
],
),
Row(
children: [
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// ),
// SizedBox(
// width: 2,
// ),
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// ),
// SizedBox(
// width: 2,
// ),
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// ),
// SizedBox(
// width: 2,
// ),
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// ),
// SizedBox(
// width: 2,
// ),
// Image.asset(
// 'assets/images/icon_star.png',
// width: 20,
// color: Color(0xff989BA1),
// ),
],
),
],
),
),
SizedBox(
height: 30,
),
//NOTE MAIN FACILITIES
Padding(
padding: EdgeInsets.only(
left: edge,
),
child: Text(
'Main Facilities',
// style: regularTextStyle.copyWith(
// fontSize: 16,
// ),
),
),
SizedBox(
height: 12,
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// FacilitiesItem(
// name: 'Kitchen',
// imgUrl: 'assets/images/icon_kitchen.png',
// totalItem: 2,
// ),
// FacilitiesItem(
// name: 'Bedroom',
// imgUrl: 'assets/images/icon_bedroom.png',
// totalItem: 3,
// ),
// FacilitiesItem(
// name: 'Big Cupboard',
// imgUrl: 'assets/images/icon_cupboard.png',
// totalItem: 4,
// ),
],
),
),
SizedBox(
height: 30,
),
//NOTE PHOTOS
Padding(
padding: EdgeInsets.only(left: edge),
child: Text(
'Photos',
style: regularTextStyle.copyWith(
fontSize: 16,
),
),
),
SizedBox(
height: 12,
),
Container(
height: 88,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 24,
),
Image.asset(
'assets/images/photo1.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
SizedBox(
width: 18,
),
Image.asset(
'assets/images/photo2.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
SizedBox(
width: 18,
),
Image.asset(
'assets/images/photo3.png',
width: 110,
height: 88,
fit: BoxFit.cover,
),
],
),
),
SizedBox(
height: 30,
//NOTE LOCATION
),
Padding(
padding: EdgeInsets.only(left: 0),
child: Text(
'Location',
// style: regularTextStyle.copyWith(
// fontSize: 16,
// ),
),
),
SizedBox(
height: 6,
),
Padding(
padding: EdgeInsets.symmetric(
// horizontal: edge,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Jln Seto Lrg.Sipirok No.23\nMedan',
// style: greyTextStyle,
),
Image.asset(
'assets/images/btn_location.png',
width: 40,
)
],
),
),
SizedBox(
height: 40,
),
Container(
margin: EdgeInsets.symmetric(
// horizontal: edge,
),
height: 50,
width: MediaQuery.of(context).size.width - (2 * edge),
child: ElevatedButton(
onPressed: () {},
child: Text(
'Book Now',
style: TextStyle(
// color: whiteColor,
fontSize: 18,
),
),
style: ButtonStyle(
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),
),
),
// backgroundColor: MaterialStateProperty.resolveWith(
// (states) {
// return purpleColor;
// },
// ),
),
),
),
SizedBox(
height: 40,
),
],
),
)
],
)
]),
),
);
}
}
More about ListView

In Flutter how to design image picker with camera icon in top right edge like in the image

How to design the image picker as shown in the image. Here is my partially achieved code
Align(
child: CircleAvatar(
radius: 50,
backgroundColor: Color(0xff476cfb),
child: ClipOval(
child: SizedBox(
width: 180.0,
height: 180.0,
child: (imagePicked != null)
? Image.file(File(imagePicked!.path))
: Image.network(
"https://images.unsplash.com/photo-1502164980785-f8aa41d53611?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
fit: BoxFit.fill,
),
),
),
),
)

Wrap with Stack and postion your Camera icon
...
Stack(
children:[
child: CircleAvatar(
radius: 50,
backgroundColor: Color(0xff476cfb),
child: ClipOval(
child: SizedBox(
width: 180.0,
height: 180.0,
child: (imagePicked != null)
? Image.file(File(imagePicked!.path))
: Image.network(
"https://images.unsplash.com/photo-1502164980785-f8aa41d53611?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
fit: BoxFit.fill,
),
),
),
),
///<- Align or use Positioned
Align(
alignment:Alignment.topRight,
chil:Icon(Icon.capture),
),
]),

Using position you can do this
Center(
child: Stack(children: [
CircleAvatar(
radius: 50,
backgroundColor: Colors.black,
child: ClipOval(
child: SizedBox(
width: 180.0,
height: 180.0,
child: Image.network(
"https://images.unsplash.com/photo-1502164980785-f8aa41d53611?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
fit: BoxFit.fill,
),
),
),
),
//use Positioned
Positioned(
top: 0,
right: 0,
child: ClipOval(
child: Container(
padding: EdgeInsets.all(5),
color: Colors.blue.withOpacity(0.8),
child: Icon(Icons.camera),
),
),
),
]))

How remove "bottom overflowed by infinity pixels" error when 2 Column are imbricated?

I'm new in Flutter,
I would like to create this
So I created two widget, one with column 1 and its child with column 2.
The problem is that I got this error "bottom overflowed by infinity pixels", despite the height and width defined.
Could you help me please ?
The parent widget:
class LogingPage extends StatelessWidget {
#override
Widget build(BuildContext context){
var size = MediaQuery.of(context).size;
return Scaffold(
body: Container(
width: size.width,
height: size.height,
child: Column(
children: [
brandDisplayContent(),
//buttonsDisplayContent(),
],
),
),
);
}
}
The child widget:
class brandDisplayContent extends StatelessWidget {
#override
Widget build(BuildContext context){
var size = MediaQuery.of(context).size;
return Scaffold(
body: Container(
height: 450,
width: size.width,
padding: EdgeInsets.only(top:200),
color: Color.fromRGBO(132, 119, 240, 100),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
brandText(),
littleTitleText(),
],
)
),
);
}
}
Text brandText(){
return Text(
"BRANDEE",
style: TextStyle(
color: Colors.white,
fontSize: 45,
letterSpacing: 8,
),
textAlign: TextAlign.center,
);
}
Text littleTitleText(){
return Text(
"Play to rise",
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
textAlign: TextAlign.center,
);
}

Another approach is to consider using the Expanded widget inside a Column. That way you don't need to get the Size, and just set size as a proportion using the Flex Property.
An example to roughly show a similar layout...
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
flex: 3,
child: Container(
color: Colors.red,
child: Column(children: [
Expanded(
flex: 2,
child: Container(
color: Colors.red,
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.yellow,
),
),
]),
)),
Expanded(
flex: 2,
child: Container(
color: Colors.blue,
child: Column(
children: [
/// Repeat
],
),
),
)
],
),
);

You can do something like this
Scaffold(
body: SizedBox(
width: size.width,
height: size.height,
child: Column(
children: [
Expanded(
flex: 5,
child: Container(
width: size.width,
padding: EdgeInsets.only(top:size.height*0.2),
color: const Color.fromRGBO(132, 119, 240, 100),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
brandText(),
littleTitleText(),
],
)
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.white,
width: size.width,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 50,
width: size.width*0.6,
decoration: BoxDecoration(
color: const Color.fromRGBO(132, 119, 240, 100),
borderRadius: BorderRadius.circular(50),
),
child: const Center(
child: Text(
'Button One',
style: TextStyle(color: Colors.white),
),
),
),
const SizedBox(height: 20,),
Container(
height: 50,
width: size.width*0.6,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
border: Border.all(color: const Color.fromRGBO(132, 119, 240, 100)),
),
child: const Center(
child: Text(
'Button Two',
style: TextStyle(color: Color.fromRGBO(132, 119, 240, 100)),
),
),
),
],
)
),
),
],
),
),
);

Define height as a percentage height: size.height * .6
Smartphones have different resolutions, and in such cases do not use a fixed height.
#override
Widget build(BuildContext context){
var size = MediaQuery.of(context).size;
return Scaffold(
body: Container(
height: size.height * .6,
width: size.width,
padding: EdgeInsets.only(top:200),
color: Color.fromRGBO(132, 119, 240, 100),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
brandText(),
littleTitleText(),
],
)
),
);
}
and buttonsDisplayContent set height: size.height * .4

I have a problem with the spaces on Flutter

I can't understand what I'm doing wrong.
I have created a small detail page for an application that I am developing on vegan recipes.
I have a space that I can't take away and I don't understand what generated it. Space is what you see circled in red.
Can you help me ?
Thank you,
Vincenzo
class _CookDetailState extends State<CookDetail> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.white),
onPressed: () => Navigator.of(context).pop(),
),
title: Text(this.widget.ricetta.title),
backgroundColor: AppColors.darkModeBackgroundColor),
body: Stack(
children: <Widget>[
Positioned(
top: 0,
left: 0,
right: 0,
bottom: 0,
child: Hero(
tag: this.widget.ricetta.title,
child: Container(
decoration:
BoxDecoration(image: DecorationImage(image: NetworkImage("https://cdn.pixabay.com/photo/2017/09/16/19/21/salad-2756467__340.jpg"),
fit: BoxFit.cover)),
),
),
),
// white container
Positioned(
left: 24.0,
right: 24.0,
bottom: 16.0,
child: Container(
//height: MediaQuery.of(context).size.height * 0.75,
//height: 650,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 100, sigmaY: 200),
child: Container(
padding: EdgeInsets.all(16.0),
height: 500,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(16.0), color: Colors.white.withOpacity(0.2)),
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16.0),
height: 800,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(16.0), color: Colors.white.withOpacity(0.2)),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
this.widget.ricetta.title,
style: TextStyle(color: Colors.white, fontSize: 20.0, fontWeight: FontWeight.bold),
),
Spacer(),
Icon(
Icons.favorite_border,
size: 24.0,
color: Colors.white,
),
],
),
new Container(
child: ListView(
shrinkWrap: true,
children: <Widget>[
this._generateList(this.widget.ricetta.listIngredieti),
this._generateStep(this.widget.ricetta.listPassaggio),
],
),
),
],
),
),
),
),
),
),
),
),
],
),
);
}
Widget _generateList(List<Ingrediente> listIngrediente){
return Column(
children: <Widget>[
for ( var myElement in listIngrediente ) Text(
myElement.title + " " + myElement.quantita,
style: TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.w600))
],
);
}
Widget _generateStep(List<StepRicetta> listStep){
return Column(
children: <Widget>[
for (var myStep in listStep) CheckboxListTile(title: AutoSizeText(myStep.title),
value: false, onChanged: (bool selected){
print("Valore selected");
},
secondary: const Icon(Icons.hourglass_empty),
)
],
);
}
}
My concept would be to leave the writing "Recipe 1", blocked, scrolling only and exclusively the list concerning the list of ingredients, such as "Put the bread", "Put 300 g of water"

I think your second EdgeInsets.all(16.0) create the space, do you have try this : EdgeInset.only(left: 16.0, right: 16.0) ?

Placing text in the center of a CircularProgressIndicator

I'm trying to place a text countdown timer in the center of a CircularProgressIndicator. This is the code for the layout of the body:
return new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 200,
height: 200,
child: new CircularProgressIndicator(
strokeWidth: 15,
value: value,
),
),
Align(
alignment: FractionalOffset.center,
child: Text("Test")
)
],
),
...
],
);
Adding the Align() widget changes the layout from this:
to this:
I've also tried
Align(
alignment: Alignment.center,
child: Text("Test")
)
and
Center(
child: Text("Test"),
)
instead of the Align() widget, but they all produce the same result

That's because your Stack doesn't have size, so to fix your issue, wrap your Stack inside SizedBox, set a height, and Center the Text.
Column(
children: <Widget>[
SizedBox(
height: 200.0,
child: Stack(
children: <Widget>[
Center(
child: Container(
width: 200,
height: 200,
child: new CircularProgressIndicator(
strokeWidth: 15,
value: 1.0,
),
),
),
Center(child: Text("Test")),
],
),
),
],
)

Use Positioned They are meant to be used with Stacks.
As per documentation:
A Positioned widget must be a descendant of a Stack, and the path from the Positioned widget to its enclosing Stack must contain only StatelessWidgets or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).
Also, don't forget to wrap your Stack inside a Container or Center so as to put constraints to the box.

Column(
children: <Widget>[
SizedBox(
height: 40,
child: Stack(
children: <Widget>[
Container(
width: 40,
height: 40,
child:
new CircularProgressIndicator(
value: 10,
color: Colors.red,
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
top: 15,
child: Text(
bytesDownload!,
textAlign:
TextAlign.center,
style: TextStyle(
fontSize: 10,
),
)),
],
),
),
],
)

Just Wrap it inside a SizedBox()
https://i.stack.imgur.com/fJfaL.png