Single Child Scroll View not working for Bottom Overflowed Pixels

Single Child Scroll View not working for Bottom Overflowed Pixels - flutter

My widgets just overflowed by 18 pixels, and when I add SingleChildScrollView() my screen just goes blank and every widget becomes invisible.
As shown in above img my widgets are overflowed by 18 pixels.
Here is my code for that :
(Note that I have added Common card widget in the same file, so the code may look lengthy but it's just repeated code)
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class home extends StatefulWidget {
const home({Key? key}) : super(key: key);
#override
_homeState createState() => _homeState();
}
class _homeState extends State<home> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue[900],
resizeToAvoidBottomInset: true,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10.0,
),
Container(
padding: EdgeInsets.only(
top: 55.0, left: 30.0, right: 30.0, bottom: 30.0),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/Circles.png'),
fit: BoxFit.cover,
)),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Control',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.w700,
),
),
Text(
'Panel',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.w700,
),
),
],
),
SizedBox(
width: 150,
),
CircleAvatar(
radius: 25.0,
)
],
),
),
Expanded(
child: Container(
width: double.infinity,
padding: EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35.0),
topRight: Radius.circular(35.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30.0,
),
Text(
'All Rooms',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.blue[900]),
),
SizedBox(
height: 20.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/bed.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Bed Room ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'4 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/room.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Living Room',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'2 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/kitchen.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Kitchen ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'5 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/bathtube.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Bath Room ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'1 Light',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/house.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Outdoor ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'5 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/balcony.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Balcony ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'2 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
],
)
],
),
),
),
Text('Bottom nav bar')
],
),
);
}
}
And when I wrap the widget with SingleChildScrollView() my screen goes blank as shown below:
Can anyone tell why it's happening and how can I resolve this?
Any help will be much appreciated :)

Try below code hope its helpful to you, Wrap your Column inside SingleChildScrollView refer documentaion here,
Just change my icons with your images
Scaffold(
backgroundColor: Colors.blue[900],
resizeToAvoidBottomInset: true,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10.0,
),
Container(
padding: EdgeInsets.only(
top: 55.0, left: 30.0, right: 30.0, bottom: 30.0),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Control',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.w700,
),
),
Text(
'Panel',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.w700,
),
),
],
),
SizedBox(
width: 150,
),
CircleAvatar(
radius: 25.0,
)
],
),
),
Expanded(
child: Container(
width: double.infinity,
padding: EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35.0),
topRight: Radius.circular(35.0),
),
),
child: SingleChildScrollView(//Your SingleChildScrollView Widget
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30.0,
),
Text(
'All Rooms',
),
SizedBox(
height: 20.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Bed Room ',
),
Text(
'4 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Living Room',
),
Text(
'2 Lights',
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Kitchen ',
),
Text(
'5 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Bath Room ',
),
Text(
'1 Light',
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Kitchen ',
),
Text(
'5 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Bath Room ',
),
Text(
'1 Light',
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Kitchen ',
),
Text(
'5 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Bath Room ',
),
Text(
'1 Light',
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Outdoor ',
),
Text(
'5 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Balcony ',
),
Text(
'2 Lights',
),
],
),
),
),
],
),
],
)
],
),
),
),
),
Text('Bottom nav bar')
],
),
);
Your Result Screen look like ->

Related

How to align widget with Wrap

I want to align image with the text. I have modified the code to make it happen, but it doesn't show any change.
The image and the text is supposed to be like this.
Instead like the picture above, mine is like this.
Here is my code, I'm using Wrap btw:
Column(
children: [
SizedBox(
width: 350,
child: Wrap(
alignment: WrapAlignment.start,
direction: Axis.horizontal,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
SvgPicture.asset(
Assets.icons.image9.path,
fit: BoxFit.cover,
),
Wrap(
children: [
Padding(
padding: EdgeInsets.only(left: 15),
child: Text(
'Gekyume Onfroy',
style: heading3(
color: ColorName.neutralBackgroundWhite,
),
),
),
],
),
...
onSelected: (_) {},
child: SvgPicture.asset(Assets.icons.moreVertical.path),
),
),
SizedBox(width: 17),
Text(
'Access Code : 6666',
style: body1(color: ColorName.neutralBackgroundWhite),
),
],
),

Do not use wrap, as it will go horizontal to vertical, if mobile device does not have enough space. You have to use Rows and Column instead, check the bottom code for implementation and screenshot:
Container(
padding: const EdgeInsets.symmetric(horizontal: 14.0, vertical: 16.0),
decoration: BoxDecoration(
color: Colors.blue[900],
borderRadius: BorderRadius.circular(12)
),
// width: 350,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 60,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
image: const DecorationImage(image: NetworkImage('https://cartoonavatar.com/wp-content/uploads/2021/12/02-300x300.png')),
),
width: 60,
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const [
Text('Gekyume Onfroy', maxLines:1, overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 20, color: Colors.white)),
Spacer(),
Text('Access Code : 6666', style: TextStyle(fontSize: 14, color: Colors.white),)
],
),
),
const SizedBox(width: 10),
IconButton(padding: EdgeInsets.zero, onPressed: () {}, icon: const Icon(Icons.more_vert, color: Colors.white))
],
),
),
const SizedBox(height: 10),
const Divider(color: Colors.white, thickness: 2,),
const SizedBox(height: 10),
Row(
children: [
const Icon(Icons.call, color: Colors.white),
const SizedBox(width: 10),
const Text('628-123-456-666', style: TextStyle(color: Colors.white)),
const Spacer(),
Container(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.blue[300],
borderRadius: BorderRadius.circular(4)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('Last Activity', style: TextStyle(color: Colors.white),),
Icon(Icons.navigate_next, color: Colors.white, size: 14,)
],
),
)
],
)
],
),
),

How I order my text and icon in a card (Flutter)

here is my currently code:
body: Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6)))
],
),
],
),
),
),
))),
but i want it like this:

The 2nd Column you have used should be a Row
body: Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,//this line is important for providing equal space
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6)))
],
),
],
),
),
),
))),

Card(
margin: const EdgeInsets.all(20),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Text',
style: TextStyle(fontSize: 18),
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"spots",
style: TextStyle(
color: Colors.black.withOpacity(0.6),
),
),
const Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
const SizedBox(
height: 5,
),
const Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
],
),
),
),
),

return Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6))),
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
],
),
),
),
));
Output

Flutter UI Place button on the edge of two containers

How to create an UI like above just the part where the Edit Profile button is on the edge of both the containers ? I used stack and positioned but didnt work out for me . Can somebody help me with this . How to approach this .

try this code no perfect but it will give you some idea
Container(
height: double.infinity,
width: double.infinity,
color: Colors.red,
child: Stack(children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
height: 300.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.white,
boxShadow: const [
BoxShadow(
color: Colors.black26,
blurRadius: 8.0,
offset: Offset(0.0, 5.0),
),
],
),
width: double.infinity,
child: Padding(
padding: const EdgeInsets.only(top: 15.0, bottom: 15.0),
child: Column(
children: <Widget>[
const SizedBox(
height: 30.0,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text(
'Year',
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
),
),
Text(
'Sophmor',
style: TextStyle(
fontSize: 34.0,
color: Colors.black87,
fontFamily: ''),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text(
'Year',
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
),
),
Text(
'Sophmor',
style: TextStyle(
fontSize: 34.0,
color: Colors.black87,
fontFamily: ''),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text(
'Year',
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
),
),
Text(
'Sophmor',
style: TextStyle(
fontSize: 34.0,
color: Colors.black87,
fontFamily: ''),
),
],
),
],
),
)
],
)),
),
Container(
width: 80,
height: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
borderRadius: BorderRadius.circular(15.0), ),
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Center(
child: Container(
child: const Text('Edit Profile'),
),
),
),
),
],
),
),
]),
);

Instead of using Stack you can use Transform.translate to shift the TextButton up by the half of its height:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: const Text('Material App Bar'),
),
body: Column(
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.bottomCenter,
color: Color(0xFFF09384),
),
),
Expanded(
flex: 3,
child: Container(
alignment: Alignment.topCenter,
color: Color(0xFF3E8C92),
child: Column(
children: [
Transform.translate(
offset: Offset(0,-35/2), // Here you insert the half of the button height
child: TextButton(
onPressed: () => print("Hello"),
child: Text("Edit Profile"),
style: TextButton.styleFrom(
fixedSize: Size(120, 35), // Here you should fix the size of the button
backgroundColor: Colors.white,
primary: Color(0xFF3E8C92),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
)
),
),
),
...List<Text>.filled(5, Text("Data"))
]
),
),
),
],
)
),
);
}
}

Container design structure - Flutter

I have the following problem when designing, inside a container I have elements that I want to organize like the following design:
until I managed to write this code:
return Container(
child: ListView(
controller: controller,
children: [
Center(
child: Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
height: 3,
width: 50,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.3),
borderRadius: BorderRadius.circular(5)
),
),
),
SizedBox(
height: 20,
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//Text('Recorrido',style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold)),
ClipOval(
child: Image.asset(
"assets/img/findout/friends2.jpg",
width: 50,
height: 50,
fit: BoxFit.cover,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: [
Text('Ubicacion',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('Molina, Vieja',
style: TextStyle(color: Colors.black)
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
textDirection: TextDirection.ltr,
children: [
Text('Mitsubishi',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('FRT-674',
style: TextStyle(color: Colors.black)
)
],
),
SizedBox(
height: 20,
)
],
),
),
Center(
child: Text(
'Informacion del Vehiculo',
style: TextStyle(color: Colors.black),
),
),
Container(
height: 150,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
FaIcon(
FontAwesomeIcons.clock,
size: 40,
),
Text(
'10.2',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15
),
),
Text(
'Horas Corridos',
style: TextStyle(color: Colors.white),
)
],
),
Column(
children: [
FaIcon(
FontAwesomeIcons.tachometerAlt,
size: 40,
),
Text(
'30 KM',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold
),
),
Text(
'Total Distancia',
style: TextStyle(color: Colors.white),
)
],
),
Column(
children: [
FaIcon(
FontAwesomeIcons.thermometerQuarter,
size: 40,
),
Text(
'20',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold
),
),
Text(
'Combustible',
style: TextStyle(color: Colors.white),
)
],
)
],
),
decoration: BoxDecoration(
color: colorPrimario,
borderRadius: BorderRadius.circular(15)
),
)
],
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 1), // changes position of shadow
),
],
),
);
the result obtained has been this has this error in design:
How could you correct this design in a correct way and achieve that design?.
thanks for your help.

Try adding some padding to the container which has the row as a child
Container(
height: 150,
padding: EdgeInsets.only(top: 20),
child: Row(
),
),

To fix blue container:
Set crossAxisAlignment of the row to: crossAxisAlignment.Center
For every column in the row, set mainAxisAlignment to mainAxisAlignment.spaceEvenly

first body Container set padding:
body: Container(
padding: const EdgeInsets.all(10.0),
child: ListView(
For Row with icon use Row with Expended Widget:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 2,
child: Container(
child: Row(
children: [
ClipOval(
child: Image.asset(
"assets/img/findout/friends2.jpg",
width: 50,
height: 50,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: [
Text('Ubicacion',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('Molina, Vieja',
style: TextStyle(color: Colors.black)
)
],
),
)
],
),
)
),
Expanded(
flex: 1,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
textDirection: TextDirection.ltr,
children: [
Text('Mitsubishi',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('FRT-674',
style: TextStyle(color: Colors.black)
)
],
),
)
)
],
),
)
blue Container:
Container(
height: 150,
padding: const EdgeInsets.all(5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FaIcon(
FontAwesomeIcons.clock,
size: 40,
),
Text(
'10.2',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15
),
),
For every Column add mainAxisAlignment: MainAxisAlignment.center,

How can i make my Scaffold widget scrollable so i would not have a "Bottom overflowed by xx Pixels" Error

I have a flutter app, and i am trying to make it scrollable, because i am getting a
"Bottom overflowed by 34 Pixels", which i am sure is caused when my widget scrolls below the apportioned height of the screen, how can i solved this issue:
i followed this question to solve the issue, but noting happened :
this is my code:
return ListView(
children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.3), BlendMode.dstATop),
image: AssetImage('images/space.gif'),
fit: BoxFit.cover,
),
),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 200.0, left: 40.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Start",
style: TextStyle(
decoration: TextDecoration.none,
color: Colors.black,
fontSize: 30.0,
),
),
Text(
"Your",
style: TextStyle(
decoration: TextDecoration.none,
color: Colors.black,
fontSize: 30.0,
),
),
Text(
"Adventure",
style: TextStyle(
fontWeight: FontWeight.bold,
decoration: TextDecoration.none,
color: Colors.black,
fontSize: 30.0,
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin:
const EdgeInsets.only(left: 30.0, right: 30.0, top: 100.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new RaisedButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
color: Colors.blue,
onPressed: () => gotoSignup(),
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"SIGN UP",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin:
const EdgeInsets.only(left: 30.0, right: 30.0, top: 30.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new RaisedButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
color: Colors.redAccent,
onPressed: () => gotoLogin(),
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"LOGIN",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
],
),
)
],
);

Solved this by removing the height: MediaQuery.of(context).size.height, attribute in the first container widget

We Keep Coding

iphone swift flutter scala powershell matlab mongodb postgresql perl eclipse

Single Child Scroll View not working for Bottom Overflowed Pixels - flutter

Related

How to align widget with Wrap

How I order my text and icon in a card (Flutter)

Flutter UI Place button on the edge of two containers

Container design structure - Flutter

How can i make my Scaffold widget scrollable so i would not have a "Bottom overflowed by xx Pixels" Error

Categories

Resources