Develop Reference

The Tab-bar View Issues

Tab bar View
The Issues Which is if I try to add tab bar view it show Horizontal viewport was given unbounded height is there any other alternate for tab bar view to fix this issues
GitHub Link : https://github.com/RakulAgn/MyFlutterApp/blob/master/ui/lib/Pages/LandingPage.dart

Hi i checked your code you need to wrap your Scaffold with the DefaultTabController and then move forward to show tabs and tabview. I'm attaching the code for your reference please check.
return DefaultTabController(
length: 3,
child: Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
// child: Center(
child: Column(children: [
Expanded(
flex: 5,
child: Container(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
width: 15,
),
Row(
children: [
SizedBox(height: 80),
customIconGoBack(context),
Row(
children: [
SizedBox(
width: 230,
),
customIconFav(),
],
)
],
)
],
),
SizedBox(
height: 280,
),
Row(
children: [
SizedBox(
height: 10,
width: 20,
),
Icon(
Icons.location_on_sharp,
color: Colors.white,
size: 25,
),
SizedBox(
width: 2,
),
Text(
"2.4km away",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 12,
color: Colors.white,
),
),
],
),
SizedBox(
height: 5,
),
Row(
children: [
SizedBox(
height: 5,
width: 20,
),
Container(
child: Text(
'Bondi Beach',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
color: Colors.white,
),
),
),
SizedBox(
width: 110,
),
Container(
height: 30,
margin: EdgeInsets.only(right: 20),
padding: EdgeInsets.only(left: 10),
width: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.black45,
),
child: Row(
children: [
Icon(
Icons.star_rounded,
color: Colors.white,
size: 25,
),
SizedBox(
width: 2,
),
Text(
"4.9",
style: TextStyle(color: Colors.white),
)
],
),
)
],
)
],
),
margin:
EdgeInsets.only(right: 18, left: 18, top: 15, bottom: 15),
padding: EdgeInsets.only(bottom: 15, top: 15),
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.5), BlendMode.dstOver),
image: AssetImage('./Assets/Bondi.jpg'),
),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(2, 2), //(x,y)
blurRadius: 5.0,
)
],
borderRadius: BorderRadius.circular(10),
),
height: MediaQuery.of(context).size.height / 1.7,
),
),
Container(
// height: 50,
child: Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent),
child: TabBar(
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
indicatorPadding: EdgeInsets.only(right: 16),
labelPadding: EdgeInsets.only(right: 16),
indicator: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5)),
tabs: [
Tab(
text: "Overview",
),
Tab(
text: "Reviews",
),
Tab(
text: "Friends",
),
],
),
),
),
Expanded(
child: TabBarView(
children: <Widget>[
Center(
child: Text("It's cloudy here",
style: textStyleRoboto(
textColor: ColorTheme.blackColor,
)),
),
Center(
child: Text("It's rainy here"),
),
Center(
child: Text("It's sunny here"),
),
],
),
),
]),
),
),
)),
);

Flutter Swipe Cards Lagging and Swiping is too slow what is the solution to make it fast?

I am building a tinder and bumble like dating app in a flutter. So, I am using swipe cards and as I have to make it scrollable so when I make it scrollable then the swiping is too slow and there is so much lagging so is there any solution to get rid of it?
Here is my code:
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:swipe_cards/swipe_cards.dart';
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
List<String> _images = [
"https://images.unsplash.com/photo-1594744803329-e58b31de8bf5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
"https://static01.nyt.com/images/2019/11/17/books/review/17Salam/Salam1-superJumbo.jpg",
"https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
"https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",
"https://images.unsplash.com/photo-1488716820095-cbe80883c496?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=333&q=80",
"https://images.unsplash.com/photo-1485043433441-db091a258e5a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
];
List<SwipeItem> _swipeItems = [];
MatchEngine? _matchEngine;
#override
void initState() {
// TODO: implement initState
for (int i = 0; i < _images.length; i++) {
_swipeItems.add(SwipeItem(content: _images[i]));
}
_matchEngine = MatchEngine(swipeItems: _swipeItems);
super.initState();
}
#override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
//backgroundColor: Color(0xff7cc8cc),
appBar: AppBar(
backgroundColor: Color(0xff76c9b2),
centerTitle: true,
title: Text('Flutter Tinder Cards'),
),
body: SwipeCards(
matchEngine: _matchEngine!,
onStackFinished: () {},
itemBuilder: (context, index) {
return Container(
height: screenHeight,
width: screenWidth,
child: Card(
margin: EdgeInsets.all(0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(0)),
side: BorderSide(color: Colors.grey)
),
child: SingleChildScrollView(
child: Column(
children: [
CachedNetworkImage(
placeholder: (context, url) =>
Center(child: CircularProgressIndicator()),
height: screenHeight,
width: screenWidth,
fit: BoxFit.cover,
//imageUrl: imgUrls![0],
imageUrl: _images[0],
),
Padding(
padding: const EdgeInsets.only(
left: 23.0,
top: 12,
bottom: 12,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Poonam, 18',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w700,
color: Colors.black87),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 23,
),
child: Row(
children: [
Icon(
Icons.location_on_sharp,
size: 20,
),
SizedBox(
width: 4,
),
Text(
'Surat, India',
style: TextStyle(
fontSize: 18,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Personal Information',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
SizedBox(
height: 6,
),
Text(
'Ex - Zerodha, Ex - Grant Thornton. I used to crunch numbers and value companies for a living, now I’m trying to build one.',
style: TextStyle(fontSize: 12),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Height',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
"5'11",
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Community',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Vaishnav',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Gender',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Female',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Workout',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Regularly',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
//imgUrls![1] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
//imageUrl: imgUrls![1],
imageUrl: _images[1],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Professional Information',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Education',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Master Degree',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Worklife',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Salary',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Above 10Lpa',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
//imgUrls![2] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
//imageUrl: imgUrls![2],
imageUrl: _images[2],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Social Life',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Drinking',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Never',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Smoking',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Never',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
//imageUrl: imgUrls![3],
imageUrl: _images[3],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Others',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Zodiac Sign',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Leo',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Political inclination',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Apolitics',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Movies',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Hindi Cinema',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
//imgUrls![4] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
imageUrl: _images[4],
//imageUrl: imgUrls![4],
),
),
SizedBox(
height: 20,
),
//imgUrls![5] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
imageUrl: _images[5],
//imageUrl: imgUrls![5],
),
),
SizedBox(
height: 80,
)
],
),
),
),
);
},
),
);
}
}
Here, instead of SinglechildScrollView I have also tried to use ListView and ListView.builder but the same problem appears.

You are testing the app in a emulator or a physical device? Debug mode or release?
Using debug mode all the app looks like slow and has a lot of lagging, even more when using a emulator.

One Elment Align Top and One Element Align Center

I have a question that I have a column and in that column, I have 2 widgets:
Container
Column
I want this Container to be on the top of the screen and the Column should be in the centre of the screen.
What I have done is as follows:
Column(
children: [
Container(
margin: EdgeInsets.only(top: 10, right: 10, left: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Profile',
style: TextStyle(
color: Color(0xff23b92c),
fontSize: 20,
fontWeight: FontWeight.bold),
),
CircleAvatar(
backgroundColor: Color(0xff23b92c),
radius: 20,
child: Center(
child: IconButton(
padding: EdgeInsets.zero,
icon: Image.asset(
'assets/images/question.png',
width: 20,
height: 20,
)),
),
),
],
)),
Center(
child: Column(
children: [
Container(
child: Text(
'Your Name',
style: TextStyle(
color: Color.fromARGB(100, 100, 100, 100)
.withOpacity(1.0),
fontSize: 22,
fontWeight: FontWeight.w700),
),
),
Container(
child: Text(
'Email',
style: TextStyle(
color: Color.fromARGB(100, 100, 100, 100)
.withOpacity(1.0),
fontSize: 22,
fontWeight: FontWeight.w700),
),
),
Container(
margin: EdgeInsets.only(top: 15),
child: Text(
'Phone Number',
style: TextStyle(
color: Color.fromARGB(100, 100, 100, 100)
.withOpacity(1.0),
fontSize: 18,
fontWeight: FontWeight.w500),
),
),
Container(
margin: EdgeInsets.only(top: 15),
child: Text(
'Address Line 1',
style: TextStyle(
color: Color.fromARGB(100, 100, 100, 100)
.withOpacity(1.0),
fontSize: 18,
fontWeight: FontWeight.w500),
),
),
Container(
child: Text(
'Address Line 2',
style: TextStyle(
color: Color.fromARGB(100, 100, 100, 100)
.withOpacity(1.0),
fontSize: 18,
fontWeight: FontWeight.w500),
),
),
Container(
child: Text(
'City, State Zip',
style: TextStyle(
color: Color.fromARGB(100, 100, 100, 100)
.withOpacity(1.0),
fontSize: 18,
fontWeight: FontWeight.w500),
),
),
Container(
margin: EdgeInsets.only(top: 20),
child: Text(
'Edit Profile',
style: TextStyle(
color:
Color.fromARGB(100, 97, 196, 101).withOpacity(1.0),
fontSize: 13,
),
),
),
Container(
margin: EdgeInsets.only(top: 20),
child: Text(
'Up-to-date name and contact details\nare necessary to receive prizes won.',
style: TextStyle(
color:
Color.fromARGB(100, 100, 100, 100).withOpacity(1.0),
fontSize: 15,
),
),
),
],
),
),
],
),
With this code, I have achieved the following screenshot
now what I want to do is that the whole column with the text YOUR NAME, EMAIL, Phone Number etc. should be in the centre and the profile and the question mark should be on the top.
Please help me out how to do this or is there is any other better way other than this code?
Thanks

Consider using stack. The first child would be The Container and the second(upper) child would be the Column with mainAlignment to center.
Stack(
children: [
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
child: Text('Your Icons'),
),
),
Positioned.fill(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Your name'),
Text('Email'),
Text('Phone'),
],
),
)
],
)
Another way would be using a parent column with expanded first child and spacer as last one
Column(
children: [
Expanded(
child: Container(
child: Text('Your Icons'),
),
),
Column(
children: [
Text('Your name'),
Text('Email'),
Text('Phone'),
],
),
Spacer(),
],
)

Use 3 widgets in your column. and make mainAxisAlignment:MainAxisAlignment.spaceEvenly or spaceBetween to give equal space to all of three widgets. and make the last one as dummy. just like below
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly
children: [
Widget1(),
Widget2(),
SizedBox(height: 5),
],
)
in your case add the root column property mainAxisAlignment: MainAxisAlignment.spaceBetween and group both the collection top and center widget in Column() and add the last widget as dummy like SizedBox(height:8)

Why does my Flutter app look fine on the IOS emulator but overflow on Android?

I understand that there are different screen sizes, but is there a way to account for that? I also don't think the screen sizes are that different. The emulator for Android is a nexus 6 and the IOS emulator is an iphone 11, which is a difference of .14 inches. The IOS version fits comfortably while the Android overflows by a lot. Attached are screenshots.
How would I fix this, aside from squishing everything closer together? Is there a way to make everything proportional to screen size, so it looks the same on IOS but then scales down to the Android phone? My Dart code is below:
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: CircleAvatar(
radius: 100.0,
backgroundImage: AssetImage('images/headshot.jpg'),
),
),
SizedBox(
height: 0.0,
),
Container(
child: Text(
'Lawrence Jing',
style: TextStyle(
fontSize: 50,
color: Colors.white,
fontFamily: 'Dancing_Script'),
),
),
SizedBox(
height: 10.0,
),
Container(
child: Text(
'SERTIFIED CASTING INTERN',
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
Card(
color: Colors.amberAccent,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.school),
SizedBox(
width: 10.0,
),
VerticalDivider(),
],
),
title: Text(
'University of Michigan',
style: TextStyle(
color: Colors.blue,
fontSize: 19.0,
fontWeight: FontWeight.bold,
),
),
enabled: false,
),
),
SizedBox(
height: 23.0,
width: 200.0,
child: Divider(
color: Colors.teal[200],
),
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.phone,
color: Colors.teal,
),
title: Text(
'(650)278-7409',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("tel:+1234"),
onLongPress: () => launch("sms: 1234"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.email,
color: Colors.teal,
),
title: Text(
'lajing#umich.edu',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("mailto:email"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.account_circle,
color: Colors.teal,
),
title: Text(
'LinkedIn',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("https://www.linkedin.com/in/lajing/"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.code,
color: Colors.teal,
),
title: Text(
'GitHub',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("https://github.com/LarryJing"),
),
),
],
),
),
),
);}
As you can see, the size of everything is pretty much hardcoded.

You should be use SingleChildScrollView as parent of Column so if space not available then it will scrollable (or) you can use ListView instead of Column
For Example
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: CircleAvatar(
radius: 100.0,
backgroundImage: AssetImage('images/headshot.jpg'),
),
),
SizedBox(
height: 0.0,
),
Container(
child: Text(
'Lawrence Jing',
style: TextStyle(
fontSize: 50,
color: Colors.white,
fontFamily: 'Dancing_Script'),
),
),
SizedBox(
height: 10.0,
),
Container(
child: Text(
'SERTIFIED CASTING INTERN',
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
Card(
color: Colors.amberAccent,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.school),
SizedBox(
width: 10.0,
),
VerticalDivider(),
],
),
title: Text(
'University of Michigan',
style: TextStyle(
color: Colors.blue,
fontSize: 19.0,
fontWeight: FontWeight.bold,
),
),
enabled: false,
),
),
SizedBox(
height: 23.0,
width: 200.0,
child: Divider(
color: Colors.teal[200],
),
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.phone,
color: Colors.teal,
),
title: Text(
'(650)278-7409',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("tel:+1234"),
onLongPress: () => launch("sms: 1234"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.email,
color: Colors.teal,
),
title: Text(
'lajing#umich.edu',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("mailto:email"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.account_circle,
color: Colors.teal,
),
title: Text(
'LinkedIn',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("https://www.linkedin.com/in/lajing/"),
),
),
SizedBox(
height: 10.0,
),
Card(
color: Colors.white,
margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
child: ListTile(
leading: Icon(
Icons.code,
color: Colors.teal,
),
title: Text(
'GitHub',
style: TextStyle(
color: Colors.teal[600],
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
enabled: true,
onTap: () => launch("https://github.com/LarryJing"),
),
),
],
),
),
),
),
);
}

Since you are using SizedBox with the specific height it will overflow if the screen size is small.You can use MediaQuery.of(context).size.height for using height of SizedBox as percentage or screens total height
The second approach would be to use Spacer and Expanded to space the content according to the available space in the Column.
Hope this helps.

Drawing a circle with draw line flutter

Hi I am attempting to draw a circle with just the drawLine() canvas methods in flutter to make a circle which looks something like this:
image of dashed circle
This is to make a speed gauge in my app and I would like to do this without using any additional dependencies if possible.
Any help is appreciated, Thanks

You can directly use / fork or reference source code of https://pub.dev/packages/flutter_gauge
github source code https://github.com/alitorki2651/flutter_gauge/tree/master/lib
working demo
full example code
import 'package:flutter/material.dart';
import 'package:flutter_gauge/flutter_gauge.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 60),
child: FlutterGauge(
index: 50,
hand: Hand.short,
number: Number.endAndCenterAndStart,
secondsMarker: SecondsMarker.secondsAndMinute,
counterStyle: TextStyle(
color: Colors.black,
fontSize: 25,
),
),
),
Row(
children: <Widget>[
Expanded(
child: FlutterGauge(
index: 50,
hand: Hand.short,
number: Number.endAndCenterAndStart,
secondsMarker: SecondsMarker.secondsAndMinute,
counterStyle: TextStyle(
color: Colors.black,
fontSize: 25,
),
),
),
// Expanded(child: FlutterGauge(secondsMarker: SecondsMarker.none,hand: Hand.short,number: Number.none,width: 200,index: 38.0,fontFamily: "Iran",counterStyle: TextStyle(color: Colors.black,fontSize: 35),counterAlign: CounterAlign.center,isDecimal: false),),
],
),
Row(
children: <Widget>[
Expanded(
child: FlutterGauge(
handSize: 30,
width: 200,
index: 50.0,
fontFamily: "Iran",
end: 100,
number: Number.endAndCenterAndStart,
secondsMarker: SecondsMarker.secondsAndMinute,
counterStyle: TextStyle(
color: Colors.black,
fontSize: 25,
)),
),
// Expanded(child: FlutterGauge(secondsMarker: SecondsMarker.none,hand: Hand.short,number: Number.none,width: 200,index: 38.0,fontFamily: "Iran",counterStyle: TextStyle(color: Colors.black,fontSize: 35),counterAlign: CounterAlign.center,isDecimal: false),),
],
),
Row(
children: <Widget>[
Expanded(
child: FlutterGauge(
handSize: 30,
width: 200,
index: 80.0,
fontFamily: "Iran",
end: 100,
number: Number.endAndCenterAndStart,
secondsMarker: SecondsMarker.secondsAndMinute,
hand: Hand.short,
counterStyle: TextStyle(
color: Colors.black,
fontSize: 22,
)),
),
// Expanded(child: FlutterGauge(handSize: 30,width: 200,index: 65.0,fontFamily: "Iran",end: 500,number: Number.endAndStart,secondsMarker: SecondsMarker.minutes,isCircle: false,counterStyle: TextStyle(color: Colors.black,fontSize: 25,)),),
],
),
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.black38,
child: FlutterGauge(
inactiveColor: Colors.white38,
activeColor: Colors.white,
handSize: 30,
width: 200,
index: 65.0,
fontFamily: "Iran",
end: 400,
number: Number.none,
secondsMarker: SecondsMarker.minutes,
isCircle: false,
hand: Hand.none,
counterAlign: CounterAlign.center,
counterStyle: TextStyle(
color: Colors.white,
fontSize: 30,
),
isDecimal: false,
)),
),
// Expanded(child: FlutterGauge(width: 200,index: 67.3,fontFamily: "Iran",counterStyle: TextStyle(color: Colors.black,fontSize: 35,),numberInAndOut: NumberInAndOut.outside,counterAlign: CounterAlign.center,secondsMarker: SecondsMarker.secondsAndMinute,hand: Hand.short,),),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: FlutterGauge(
index: 50.0,
counterStyle: TextStyle(
color: Colors.black,
fontSize: 25,
),
widthCircle: 10,
secondsMarker: SecondsMarker.none,
number: Number.all),
),
// Expanded(child: FlutterGauge(index: 25.0,counterStyle : TextStyle(color: Colors.black,fontSize: 25,),secondsMarker: SecondsMarker.secondsAndMinute,number: Number.all,numberInAndOut: NumberInAndOut.outside,)),
],
),
Row(
children: <Widget>[
// Expanded(child: FlutterGauge(handSize: 30,width: 200,index: 65.0,fontFamily: "Iran",end: 100,number: Number.endAndCenterAndStart,secondsMarker: SecondsMarker.secondsAndMinute,counterStyle: TextStyle(color: Colors.black,fontSize: 25,)),),
// Expanded(child: FlutterGauge(secondsMarker: SecondsMarker.none,hand: Hand.short,number: Number.none,width: 200,index: 38.0,fontFamily: "Iran",counterStyle: TextStyle(color: Colors.black,fontSize: 35),counterAlign: CounterAlign.center,isDecimal: false),),
],
),
Row(
children: <Widget>[
Expanded(
child: FlutterGauge(
handSize: 30,
width: 200,
index: 80.0,
fontFamily: "Iran",
end: 100,
number: Number.endAndCenterAndStart,
secondsMarker: SecondsMarker.secondsAndMinute,
hand: Hand.short,
counterStyle: TextStyle(
color: Colors.black,
fontSize: 22,
)),
),
// Expanded(child: FlutterGauge(handSize: 30,width: 200,index: 65.0,fontFamily: "Iran",end: 500,number: Number.endAndStart,secondsMarker: SecondsMarker.minutes,isCircle: false,counterStyle: TextStyle(color: Colors.black,fontSize: 25,)),),
],
),
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.black38,
child: FlutterGauge(
inactiveColor: Colors.white38,
activeColor: Colors.white,
handSize: 30,
width: 200,
index: 65.0,
fontFamily: "Iran",
end: 400,
number: Number.none,
secondsMarker: SecondsMarker.minutes,
isCircle: false,
hand: Hand.none,
counterAlign: CounterAlign.center,
counterStyle: TextStyle(
color: Colors.white,
fontSize: 30,
),
isDecimal: false,
)),
),
// Expanded(child: FlutterGauge(width: 200,index: 67.3,fontFamily: "Iran",counterStyle: TextStyle(color: Colors.black,fontSize: 35,),numberInAndOut: NumberInAndOut.outside,counterAlign: CounterAlign.center,secondsMarker: SecondsMarker.secondsAndMinute,hand: Hand.short),),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: FlutterGauge(
index: 50.0,
counterStyle: TextStyle(
color: Colors.black,
fontSize: 25,
),
widthCircle: 10,
secondsMarker: SecondsMarker.none,
number: Number.all),
),
// Expanded(child: FlutterGauge(index: 25.0,counterStyle : TextStyle(color: Colors.black,fontSize: 25,),secondsMarker: SecondsMarker.secondsAndMinute,number: Number.all,numberInAndOut: NumberInAndOut.outside,)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: FlutterGauge(
index: 50.0,
width: 270,
counterStyle: TextStyle(
color: Colors.black,
fontSize: 25,
),
widthCircle: 10,
secondsMarker: SecondsMarker.none,
number: Number.all),
),
],
),
FlutterGauge(
handSize: 30,
width: 270,
index: 65.0,
fontFamily: "Iran",
end: 100,
number: Number.endAndCenterAndStart,
secondsMarker: SecondsMarker.secondsAndMinute,
counterStyle: TextStyle(
color: Colors.black,
fontSize: 25,
)),
FlutterGauge(
index: 50.0,
width: 270,
counterStyle: TextStyle(
color: Colors.black,
fontSize: 25,
),
widthCircle: 10,
secondsMarker: SecondsMarker.none,
number: Number.all),
],
),
);
}
}