How do I make my code look like the image? - flutter

I am currently working on a project and pretty new to flutter. I am finding it difficult to achieve this outlook. Please any help will be appreciated. This is a header of an application and this is what I have done so far. Thank you.
class HeaderWiget extends StatelessWidget {
final Color colors = Colors.amber;
return Container(
Colors: colors,
padding: const EdgeInsets.only(
top: 30,
bottom: 10,
left: 20,
right: 20,
),
decoration: BoxDecoration(
color: CustomColor.uplanitBlue,
),
child: Row(
children: [`enter code here`
Column(
children: [
Text('What do you do?',
style: GoogleFonts.workSans(
fontSize: 28,
fontWeight: FontWeight.w500,
)),
Text('You can select multiple options',
style: GoogleFonts.workSans(
fontSize: 16,
fontWeight: FontWeight.w400,
))
],
),
FlatButton(
onPressed: () {},
child: Text(
'Skip',
style: GoogleFonts.workSans(
color: Colors.white,
decoration: TextDecoration.underline,
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
),
],
),
);
}


you can use code below:
class HeaderWiget extends StatelessWidget {
final Color colors = Colors.amber;
return Container(
padding: const EdgeInsets.only(
top: 30,
bottom: 10,
left: 20,
right: 20,
),
decoration: BoxDecoration(
color: CustomColor.uplanitBlue,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('What do you do?',
style: GoogleFonts.workSans(
fontSize: 28,
fontWeight: FontWeight.w500,
)),
Text('You can select multiple options',
style: GoogleFonts.workSans(
fontSize: 16,
fontWeight: FontWeight.w400,
))
],
),
FlatButton(
onPressed: () {},
child: Text(
'Skip',
style: GoogleFonts.workSans(
color: Colors.white,
decoration: TextDecoration.underline,
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
),
],
),
);
}


try this code
class HeaderWiget extends StatelessWidget {
return Container(
width: MediaQuery.of(context).size.width,
height: 100,
decoration: BoxDecoration(
color: CustomColor.uplanitBlue,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
Text('What do you do?',
style: GoogleFonts.workSans(
fontSize: 28,
fontWeight: FontWeight.w500,
)),
Text('You can select multiple options',
style: GoogleFonts.workSans(
fontSize: 16,
fontWeight: FontWeight.w400,
))
],
),
FlatButton(
onPressed: () {},
child: Text(
'Skip',
style: GoogleFonts.workSans(
color: Colors.white,
decoration: TextDecoration.underline,
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
),
],
),
],
),
);
}

Related

Flutter - Align Items inside a Row - Multiple tiles

I have the following List.
I would like the scale Icons (on the right) to be aligned.
The top should be in the same spot as the one underneath.
#override
Widget build(BuildContext context) {
return Padding(
padding:
const EdgeInsets.only(left: 0.0, right: 0.0, top: 8.0, bottom: 8.0),
child: Slidable(
endActionPane: ActionPane(motion: StretchMotion(), children: [
//delete option
SlidableAction(
onPressed: deleteTapped,
backgroundColor: Colors.red.shade400,
icon: Icons.delete,
borderRadius: BorderRadius.circular(8),
)
]),
child: Container(
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Color(0xFFD9F0FF),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
const Icon(
Icons.date_range_outlined,
color: Color(0xFF006B8F),
),
const SizedBox(width: 8),
Text(date,
style: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
color: Color(0xFF006B8F))),
const Spacer(),
const Text(
"|",
style: TextStyle(
fontSize: 18,
color: Color(0xFF006B8F),
fontWeight: FontWeight.bold),
),
const Spacer(),
const Icon(
Icons.monitor_weight_outlined,
color: Color(0xFF006B8F),
),
const SizedBox(width: 8),
Text(weight + " kg",
style: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
color: Color(0xFF006B8F))),
],
),
),
),
);
}
}
I have tried several things, like putting the Icon and the text in a container but with no luck.
Any help appreciate it!

While you are already using Spacer on both Size, you can use
textAlign: TextAlign.center,
const Text(
"|",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Color(0xFF006B8F),
fontWeight: FontWeight.bold),
),
Without spacer, it can be
Expanded(
child: const Text(
"|",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Color(0xFF006B8F),
fontWeight: FontWeight.bold),
),
),

try this:
Column(
children: [
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
children: [
//left part
],
),
VerticalDivider(),
Row(
children: [
//right part
],
)
],
),
),
....
],
)

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,
),
),
],
)
],
),
),
],
),
),
),
);
}
}

Multiple Texts inside a container - how to add 'BTC' Text under the STORE OF VALUE section

// ignore_for_file: sort_child_properties_last, prefer_const_constructors, prefer_const_literals_to_create_immutables
import 'package:flutter/material.dart';
class StockPage extends StatelessWidget {
const StockPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.green,
elevation: 0,
title: Text(
'PiyaSync',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
),
body: GridView(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: [
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'STORE OF VALUE',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
),
),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'SMART CONTRACTS',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
)),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'DEFI',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
),
),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'MEMES',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
)),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'CENTRALIZED EXCHANGE TOKENS',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
)),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'NFTS',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
)),
],
),
);
}
}
/*ListView(
children: <Widget>[
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'STORE OF VALUE',
style: TextStyle(
color: Colors.black,
fontSize: 17,
fontWeight: FontWeight.w900),
),
Text(
'SOFTWARE - INFRASTRUCTURE',
style: TextStyle(
color: Colors.black,
fontSize: 13,
fontWeight: FontWeight.w900),
)
],
),
)
],
)*/
/*Column(
children: <Widget>[
Expanded(
child: ListView(
children: [
Text(
'STORE OF VALUE',
style: TextStyle(fontSize: 21, fontWeight: FontWeight.bold),
),
Expanded(
child: Container(
child: Text(
'BTC',
style:
TextStyle(fontSize: 25, fontWeight: FontWeight.w500),
),
color: Colors.green,
padding: EdgeInsets.only(left: 1),
margin: EdgeInsets.all(1),
),
),
],
),
),
],
),*/
/* Container(
width: 210, //360
height: 100, //230
color: Colors.green,
child: Align(
alignment: Alignment.center,
child: Text(
'ETH',
style: TextStyle(
height: -1,
fontWeight: FontWeight.w500,
fontSize: 25,
),
),
),
),*/
/*Padding(
padding: const EdgeInsets.only(right: 260),
child: Container(
height: 265,
color: Colors.white,
alignment: Alignment.topLeft,
child: Column(children: [
Text(
"STORE OF VALUE",
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
),
),
Container(
width: 210, //360
height: 130, //230
color: Colors.green,
child: Align(
alignment: Alignment.center,
child: Text(
'BTC',
style: TextStyle(
height: -1,
fontWeight: FontWeight.w500,
fontSize: 25,
),
),
),
),
Stack(
children: [
Positioned(
left: 20,
top: 20,
child: Container(
height: 200,
width: 200,
color: Colors.black,
child: Text('ETH'),
),
),
],
)
]),
),
),*/

You can use \n for new line and btc will be diaplayed below the other text
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'STORE OF VALUE\nBTC',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
),
),

How to make responsive content in Container 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'),
),
],
),
),
],
),
);
}

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