How to make responsive content in Container Flutter - flutter

How can I make the responsive Content in Container,
when I put anything in a container and the Height content is oversize what is the solution for this? I need to fix it when the user input too much information about the post and I warp it with less/more plugins and when the user uses it the screen is over pixel for sure
I use media query on the container that means I fix the size is okay so it's will happen if too much text
Widget _postWidget() {
return Container(
height: MediaQuery.of(context).size.height * 0.40,
width: MediaQuery.of(context).size.width * 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: Container(
height: 45, //height, //155,
width: 45, //width, //155,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage(''),
fit: BoxFit.cover,
),
),
),
),
Expanded(
flex: 6,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
text: '[C]post.username ',
style: TextStyle(
color: Colors.black,
fontFamily: 'SukhumvitSetBold',
fontWeight: FontWeight.bold),
children: const <TextSpan>[
TextSpan(
text: '3h',
style: TextStyle(
color: Colors.grey,
fontFamily: 'SukhumvitSetBold',
fontWeight: FontWeight.w400)),
],
),
),
Text(
'[user]Desuka',
style: TextStyle(
color: Colors.grey[500],
fontFamily: 'SukhumvitSetMedium',
),
)
],
),
),
),
Expanded(
flex: 2,
child: SizedBox(
width: 200.0,
height: 30.0,
child: OutlinedButton(
child: Text(
'Join+',
style: TextStyle(
color: HexColor("7225FF"),
),
),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
side: BorderSide(
width: 1.5,
color: HexColor("7225FF"),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
))),
],
),
),
),
InkWell(
child: Container(
margin: const EdgeInsets.only(
top: 10,
bottom: 10,
right: 20,
left: 20,
),
width: double.infinity,
height: 170.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
image: DecorationImage(
image: NetworkImage(
'https://gitlab.com/2Shours/alphapic/raw/master/22.jpeg'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
children: [
Text(
'Travis Scott x Nike Fregment',
style: TextStyle(
color: Colors.black,
fontFamily: 'SukhumvitSetBold',
fontSize: 16,
fontWeight: FontWeight.bold),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
children: [
ReadMoreText(
'The Flutter framework builds its layout via the composition of widgets, everything that you construct programmatically is a widget and these are compiled together to create the user interface. ',
style: TextStyle(
color: Colors.black,
fontSize: 15,
fontFamily: 'SukumvitSetMedium'),
trimLines: 2,
colorClickableText: HexColor("7225FF"),
trimMode: TrimMode.Line,
trimCollapsedText: 'More',
trimExpandedText: ' Less',
),
],
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: Icon(
(IconData(
0xe902,
fontFamily: 'heartPost',
)),
color: Colors.purple,
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Like post'),
),
Text(
'2222',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 10.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(
IconData(0xe901, fontFamily: 'commentPost')),
iconSize: 20.0,
onPressed: () {}),
Text(
'2222',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 20.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(IconData(0xe906, fontFamily: 'offerPost')),
iconSize: 20.0,
onPressed: () {},
),
Text(
'Offer',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
],
),
IconButton(
icon: Icon(
(IconData(
0xe908,
fontFamily: 'wishlistPost',
)),
color: Colors.purple,
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Save post'),
),
],
),
),
],
),
);
}

Related

how to lock widgets in place in flutter?

I am creating a news app in flutter. I want to achieve U.I as displayed in screenshot.
in the picture attached, there is title for 1st tile which is in 3 lines, now I want this U.I for all tiles. In the second tile the title for news is one line. which is causing trouble as widgets down in column are moved up.
Here is my code.
Container(
width: 260.w,
margin: EdgeInsets.only(right: 10.w),
decoration: BoxDecoration(
color: color.inactiveButton,
borderRadius:
BorderRadius.all(Radius.circular(8.sp))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
controller.category.firstHeader.list[index]
.thumbnail,
width: 260.w,
height: 143.h,
fit: BoxFit.fill,
),
Container(
width: 260.w,
padding: EdgeInsets.all(10.sp),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(8.sp)),
color: color.inactiveButton,
),
child: Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
const Icon(
Icons.remove_red_eye,
color: Colors.grey,
size: 20,
),
SizedBox(
width: 5.w,
),
Text(
'${controller.category.firstHeader.list[index].views!} Views',
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: Colors.grey,
),
),
],
),
Row(
children: [
const FaIcon(
FontAwesomeIcons.clock,
color: Colors.grey,
size: 20,
),
SizedBox(
width: 5.w,
),
Text(
controller.category.firstHeader
.list[index].latest!,
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: Colors.grey,
),
),
],
),
],
),
SizedBox(
height: 5.h,
),
Text(
controller.category.firstHeader
.list[index].title,
maxLines: 3,
style: GoogleFonts.inter(
fontSize: 14.sp,
fontWeight: FontWeight.w500,
// color: Colors.grey,
),
),
SizedBox(
height: 5.h,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.all(5.sp),
decoration: BoxDecoration(
color: color.highlight,
borderRadius: BorderRadius.all(
Radius.circular(8.sp)),
),
child: Row(
children: [
FaIcon(
FontAwesomeIcons.faceSmile,
color: color.buttonText,
size: 20,
),
SizedBox(
width: 5.w,
),
Text(
controller
.category
.firstHeader
.list[index]
.favourites!,
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: color.buttonText,
),
),
],
),
),
Text(
controller.category.firstHeader
.list[index].country!,
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: Colors.grey,
),
),
],
),
],
),
),
],
),
)),
This can be solved by adding mainAxisAlignment: MainAxisAlignment.spaceBetween for column
Container(
width: 260.w,
margin: EdgeInsets.only(right: 10.w),
decoration: BoxDecoration(
color: color.inactiveButton,
borderRadius:
BorderRadius.all(Radius.circular(8.sp))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
controller.category.firstHeader.list[index]
.thumbnail,
width: 260.w,
height: 143.h,
fit: BoxFit.fill,
),
Container(
width: 260.w,
padding: EdgeInsets.all(10.sp),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(8.sp)),
color: color.inactiveButton,
),
child: Column(
// ----------- here ----------------------
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
const Icon(
Icons.remove_red_eye,
color: Colors.grey,
size: 20,
),
SizedBox(
width: 5.w,
),
Text(
'${controller.category.firstHeader.list[index].views!} Views',
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: Colors.grey,
),
),
],
),
Row(
children: [
const FaIcon(
FontAwesomeIcons.clock,
color: Colors.grey,
size: 20,
),
SizedBox(
width: 5.w,
),
Text(
controller.category.firstHeader
.list[index].latest!,
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: Colors.grey,
),
),
],
),
],
),
SizedBox(
height: 5.h,
),
Text(
controller.category.firstHeader
.list[index].title,
maxLines: 3,
style: GoogleFonts.inter(
fontSize: 14.sp,
fontWeight: FontWeight.w500,
// color: Colors.grey,
),
),
SizedBox(
height: 5.h,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.all(5.sp),
decoration: BoxDecoration(
color: color.highlight,
borderRadius: BorderRadius.all(
Radius.circular(8.sp)),
),
child: Row(
children: [
FaIcon(
FontAwesomeIcons.faceSmile,
color: color.buttonText,
size: 20,
),
SizedBox(
width: 5.w,
),
Text(
controller
.category
.firstHeader
.list[index]
.favourites!,
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: color.buttonText,
),
),
],
),
),
Text(
controller.category.firstHeader
.list[index].country!,
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: Colors.grey,
),
),
],
),
],
),
),
],
),
)),

Bottom Overflowed by pixels Cant Fix

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../appbar.dart';
class DetailProductHeading extends StatelessWidget {
const DetailProductHeading({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: CustomAppBar(title: 'Detail Product'),
body: Padding(
padding: const EdgeInsets.all(35.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
color: Color(0xFFFAFAFA),
borderRadius: BorderRadius.all(Radius.circular(30.0)),
),
child: InkWell(
child: Center(
child: Image.asset(
'image/headphone.png',
height: 300,
),
),
),
),
SizedBox(
height: 25,
),
Container(
margin: EdgeInsets.symmetric(horizontal: 10),
width: double.infinity,
height: 300,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'TMA-2HD Wireless',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontWeight: FontWeight.w600,
fontSize: 25,
),
),
SizedBox(
height: 10,
),
Text(
"Rp. 1.500.000",
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
color: Color(0xFFFE3A30),
fontWeight: FontWeight.w600,
),
),
SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.star,
color: Colors.yellow,
),
SizedBox(
width: 5.0,
),
Text('4.0')
],
),
Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
Row(
children: [
Text(
'86 Reviews',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
),
),
SizedBox(
width: 60,
),
SizedBox(
width: 107,
height: 20,
child: OutlinedButton(
onPressed: () {},
style: OutlinedButton.styleFrom(
backgroundColor: Color(0xFFE5F6DF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
child: Text(
"Tersedia: 250",
style: (TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontSize: 12,
color: Colors.green,
)),
),
),
)
],
),
],
),
SizedBox(
height: 15,
),
Divider(
color: Colors.grey,
thickness: 0.50,
),
SizedBox(
height: 15,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Description Product',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
SizedBox(
height: 10,
),
Text(
'The speaker unit contains a diaphragm that is precision-grown from NAC
Audio bio-cellulose, making it stiffer, lighter and stronger than regular
PET speaker units, and allowing the sound-producing diaphragm to vibrate
without the levels of distortion found in other speakers.',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontSize: 12,
),
),
SizedBox(
height: 8,
),
Text(
'The speaker unit contains a diaphragm that is precision-grown from NAC
Audio bio-cellulose, making it stiffer, lighter and stronger than regular
PET speaker units, and allowing the sound-producing diaphragm to vibrate
without the levels of distortion found in other speakers.',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontSize: 12,
),
),
],
)
],
),
),
],
),
),
);
}
}
Wrap your body:Padding with SingleChildScrollView for now.
class DetailProductHeading extends StatelessWidget {
const DetailProductHeading({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(35.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
color: Color(0xFFFAFAFA),
borderRadius: BorderRadius.all(Radius.circular(30.0)),
),
child: InkWell(
child: Center(
child: Image.asset(
'image/headphone.png',
height: 300,
),
),
),
),
SizedBox(
height: 25,
),
Container(
margin: EdgeInsets.symmetric(horizontal: 10),
width: double.infinity,
height: 300,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'TMA-2HD Wireless',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontWeight: FontWeight.w600,
fontSize: 25,
),
),
SizedBox(
height: 10,
),
Text(
"Rp. 1.500.000",
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
color: Color(0xFFFE3A30),
fontWeight: FontWeight.w600,
),
),
SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.star,
color: Colors.yellow,
),
SizedBox(
width: 5.0,
),
Text('4.0')
],
),
Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
Row(
children: [
Text(
'86 Reviews',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
),
),
SizedBox(
width: 60,
),
SizedBox(
width: 107,
height: 20,
child: OutlinedButton(
onPressed: () {},
style: OutlinedButton.styleFrom(
backgroundColor: Color(0xFFE5F6DF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
child: Text(
"Tersedia: 250",
style: (TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontSize: 12,
color: Colors.green,
)),
),
),
)
],
),
],
),
SizedBox(
height: 15,
),
Divider(
color: Colors.grey,
thickness: 0.50,
),
SizedBox(
height: 15,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Description Product',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
SizedBox(
height: 10,
),
SizedBox(
height: 8,
),
Text(
'''The speaker unit contains a diaphragm that is precision-grown from NAC
Audio bio-cellulose, making it stiffer, lighter and stronger than regular
PET speaker units, and allowing the sound-producing diaphragm to vibrate
without the levels of distortion found in other speakers.''',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontSize: 12,
),
),
],
)
],
),
),
],
),
),
),
);
}
}

dart - flutter single child scroll view changes widget layout of screen

I'm trying to make my flutter page scrollable using the single child scroll view widget. But after doing so the entire widget layout of the screen is messed up. Below I have attached a screenshot of my app, and it shows what i wanted to happen but instead what happened after i used the single child scroll view widget.
import 'package:flutter/material.dart';
import 'package:formula1_app/models/driver_model.dart';
class DriverBioScreen extends StatefulWidget {
final Driver driver;
DriverBioScreen({required this.driver});
#override
_DriverBioScreenState createState() => _DriverBioScreenState();
}
class _DriverBioScreenState extends State<DriverBioScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: 1500,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
Container(
height: 250,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(30),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(30),
child: Image(
image: AssetImage('assets/images/driver_profile_bg_darken.jpg'),
fit: BoxFit.cover,
)
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 30, horizontal: 20),
child: Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back),
iconSize: 30,
color: Colors.white,
onPressed: () {
Navigator.pop(context);
},
)
],
),
),
SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 0, left: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
height: 80,
width: 4,
decoration: BoxDecoration(
color: Colors.blue[800]
),
),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.driver.firstName,
style: TextStyle(
fontSize: 25,
color: Colors.white
),
),
Text(
widget.driver.lastName,
style: TextStyle(
fontSize: 32,
color: Colors.white,
fontWeight: FontWeight.bold
),
),
Row(
children: [
Text(
widget.driver.number,
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold
),
),
Text(
' | ${widget.driver.team}',
style: TextStyle(
fontSize: 18,
color: Colors.white,
),
)
],
)
],
),
),
],
),
Image(
image: AssetImage(widget.driver.driverImageUrl),
height: 200, // 200
width: 200, //200
),
],
),
),
)
],
),
),
Column(
children: [
Column(
children: [
Text(
"Achievements",
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold
),
),
Padding(
padding: EdgeInsets.only(top: 0, left: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 400,
width: 228,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Wins',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold
),
),
Text(
'Podiums',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold
),
),
Text(
'DHL Fastest Laps',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold
),
),
Text(
'Grands Prix Entered',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold
),
),
Text(
'World Championships',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold
),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 80),
child: Container(
height: 400,
width: 100,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 29),
child: Text(
(widget.driver.wins),
style: TextStyle(
fontSize: 30
),
),
),
Padding(
padding: EdgeInsets.only(top: 29),
child: Text(
widget.driver.podiums,
style: TextStyle(
fontSize: 30
),
),
),
Padding(
padding: EdgeInsets.only(top: 25),
child: Text(
widget.driver.fastestLap,
style: TextStyle(
fontSize: 30
),
),
),
Padding(
padding: EdgeInsets.only(top: 40),
child: Text(
widget.driver.gpEntered,
style: TextStyle(
fontSize: 30
),
),
),
Padding(
padding: EdgeInsets.only(top: 59),
child: Text(
widget.driver.worldchampionships,
style: TextStyle(
fontSize: 30,
),
),
),
],
),
),
)
],
),
),
Column(
children: [
Text(
'Team',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold
),
),
// Image(
// image: AssetImage(widget.driver.team),
// )
],
),
],
),
],
)///,
],
),
)
);
}
}
This is a screenshot of what I wanted
This is what happens after i added the singlechildscrolview widget
You can use ListView
class _DriverBioScreenState extends State<DriverBioScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
Container(
height: 1500,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
Container(
height: 250,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(30),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(30),
child: Image(
image: AssetImage(
'assets/images/driver_profile_bg_darken.jpg'),
fit: BoxFit.cover,
)),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 30, horizontal: 20),
child: Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back),
iconSize: 30,
color: Colors.white,
onPressed: () {
Navigator.pop(context);
},
)
],
),
),
SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 0, left: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
height: 80,
width: 4,
decoration:
BoxDecoration(color: Colors.blue[800]),
),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.driver.firstName,
style: TextStyle(
fontSize: 25, color: Colors.white),
),
Text(
widget.driver.lastName,
style: TextStyle(
fontSize: 32,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Row(
children: [
Text(
widget.driver.number,
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
' | ${widget.driver.team}',
style: TextStyle(
fontSize: 18,
color: Colors.white,
),
)
],
)
],
),
),
],
),
Image(
image: AssetImage(widget.driver.driverImageUrl),
height: 200, // 200
width: 200, //200
),
],
),
),
)
],
),
),
Column(
children: [
Column(
children: [
Text(
"Achievements",
style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
),
Padding(
padding: EdgeInsets.only(top: 0, left: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 400,
width: 228,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Wins',
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.bold),
),
Text(
'Podiums',
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.bold),
),
Text(
'DHL Fastest Laps',
style: TextStyle(
fontSize: 25, fontWeight: FontWeight.bold),
),
Text(
'Grands Prix Entered',
style: TextStyle(
fontSize: 25, fontWeight: FontWeight.bold),
),
Text(
'World Championships',
style: TextStyle(
fontSize: 25, fontWeight: FontWeight.bold),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 80),
child: Container(
height: 400,
width: 100,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 29),
child: Text(
(widget.driver.wins),
style: TextStyle(fontSize: 30),
),
),
Padding(
padding: EdgeInsets.only(top: 29),
child: Text(
widget.driver.podiums,
style: TextStyle(fontSize: 30),
),
),
Padding(
padding: EdgeInsets.only(top: 25),
child: Text(
widget.driver.fastestLap,
style: TextStyle(fontSize: 30),
),
),
Padding(
padding: EdgeInsets.only(top: 40),
child: Text(
widget.driver.gpEntered,
style: TextStyle(fontSize: 30),
),
),
Padding(
padding: EdgeInsets.only(top: 59),
child: Text(
widget.driver.worldchampionships,
style: TextStyle(
fontSize: 30,
),
),
),
],
),
),
)
],
),
),
Column(
children: [
Text(
'Team',
style: TextStyle(
fontSize: 32, fontWeight: FontWeight.bold),
),
// Image(
// image: AssetImage(widget.driver.team),
// )
],
),
],
),
],
)
///,
],
),
);
}
}
wrap Image widget with Expanded
Expanded(
child:Image(
image: AssetImage(widget.driver.driverImageUrl),
height: 200, // 200
width: 200, //200
),
),
because your Image widget is taking all the space

I have a problem adding a Text to a Container

I'm new to flutter and new to programming in general. My problem is I can't add this
child: Align(
alignment: Alignment(0, 48),
child: Text(
'SETS',
style: TextStyle(
fontWeight: FontWeight._(4),
fontSize: 18.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
)),
to this code
class _SetupState extends State<Setup> {
#override
Widget build(BuildContext context) {
return Column(children: [
Align(
alignment: Alignment.topCenter,
child: SizedBox(
height: 350.0,
width: 350.0,
child: Container(
margin: const EdgeInsets.only(top: 6.0),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Color(0xFFE3E3E3),
),
child: Align(
alignment: Alignment.topCenter,
child: Text(
'SET UP YOUR WORKOUT',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
)),
),
)),
]);
}
}
I tried adding it to the container, making a new align but I still didn't manage to succeed.
Thanks for the help!!
I made a layout based on the image provided in the comments:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 350.0,
width: 350.0,
child: Container(
margin: const EdgeInsets.only(top: 6.0),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Color(0xFFE3E3E3),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'SET UP YOUR WORKOUT',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Column(
children: <Widget>[
Text(
'SETS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Column(
children: <Widget>[
Text(
'WORKS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Column(
children: <Widget>[
Text(
'RESTS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: FlatButton(
color: Colors.greenAccent,
child: Text(
'START',
style: TextStyle(
fontSize: 40,
color: Colors.white,
fontWeight: FontWeight.w400
),
),
onPressed: () {
},
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
),
),
],
)
],
),
),
),
),
);
}
I used a Column(let's name it column1) for the whole grey box, and every one of (SETS, +, -), (WORK, +, -), and (RESTS, +, -) is a Column inside the column1. Every (+, -) is a Row wrapped with a Padding. The Padding is used to make the (+, -) become closer to the center of the box.
There are many ways to make such layout, this is only one.
Result:
if that does not work you can first align it the way you want. Then use padding or margin so that you can have it exactly where you want it be.
Container(
padding:
alignment:
child:Text()
)

How to set icon to topRight

My widget inside row, and I want to set Icon widget possition on topRight but always fail beacuse my Icon always in center possition
I already use
Align(
alignment: Alignment.topRight,
child: Icon(
LineAwesomeIcons.heart,
color: lightColor,
size: 36,
),
)
To force possition but always fail. How to achieve this situation? Icon always be center
My layout
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(
vertical: 14.0,
horizontal: 18.0,
),
margin: EdgeInsets.only(
bottom: 20.0,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1.0,
blurRadius: 6.0,
),
],
),
child: Row(
children: <Widget>[
CircleAvatar(
backgroundColor: Color(0xFFD9D9D9),
backgroundImage: NetworkImage(USER_IMAGE),
radius: 36.0,
),
SizedBox(width: 10.0),
Flexible(
child: RichText(
text: TextSpan(
text: widget.status + "\n",
style: TextStyle(
color: Colors.purple,
fontSize: 12,
fontWeight: FontWeight.w400,
height: 1.3,
),
children: <TextSpan>[
TextSpan(
text: widget.name + "\n",
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w600,
height: 1.3,
),
),
TextSpan(
text: widget.address,
style: TextStyle(
color: Colors.black38,
fontWeight: FontWeight.w400,
fontSize: 14,
),
),
],
),
),
),
SizedBox(width: 10.0),
Icon(
LineAwesomeIcons.heart,
color: lightColor,
size: 36,
)
Align(
alignment: Alignment.topRight,
child: Icon(
LineAwesomeIcons.heart,
color: lightColor,
size: 36,
),
)
],
),
);
}
I want to output like
Try this one
Container(
padding: EdgeInsets.symmetric(
vertical: 14.0,
horizontal: 18.0,
),
margin: EdgeInsets.only(
bottom: 20.0,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1.0,
blurRadius: 6.0,
),
],
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
CircleAvatar(
backgroundColor: Color(0xFFD9D9D9),
backgroundImage: NetworkImage('https://banner2.cleanpng.com/20180920/yko/kisspng-computer-icons-portable-network-graphics-avatar-ic-5ba3c66df14d32.3051789815374598219884.jpg'),
radius: 36.0,
),
SizedBox(width: 10.0),
Flexible(
child: RichText(
text: TextSpan(
text: "status\n",
style: TextStyle(
color: Colors.purple,
fontSize: 12,
fontWeight: FontWeight.w400,
height: 1.3,
),
children: <TextSpan>[
TextSpan(
text: "Name \n",
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w600,
height: 1.3,
),
),
TextSpan(
text: 'Poplar pharma limited Dermatologist San Franscisco CA|5',
style: TextStyle(
color: Colors.black38,
fontWeight: FontWeight.w400,
fontSize: 14,
),
),
],
),
),
),
SizedBox(width: 10.0),
],
),
),
Align(
alignment: Alignment.topCenter,
child: Icon(
Icons.help,
color: Colors.cyan,
size: 36,
),
),
],
),
)
Set crossAxisAlignment to CrossAxisAlignment.start in your Row
Like this
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children : [...]
)
UPDATE
The avatar stays in the center
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(),
SizedBox(width: 20),
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("fhfhfj\nufhfhjfhf\njifjifjifj\n",
style: TextStyle(color: Colors.black)),
SizedBox(width: 20),
Icon(Icons.favorite, color: Colors.black),
],
),
],
)