flutterflutter-layoutflutter-container
Flutter Design for different screen sizes
I was tried my app on the phone and on the tablet. The design looks bad if the design is good on the other screen. I have shared an image that phone and tablet so you can see what design looks different when using different screen sizes.How can I set my design on all different screen sizes with Flutter?
My code :
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() {
runApp(Myapp());
}
class Myapp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.red),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"The Bar ",
style: TextStyle(
color: Colors.white,
fontSize: 28.0,
),
),
),
floatingActionButton: FloatingActionButton(
splashColor: Colors.green,
child: Icon(
Icons.mouse,
color: Colors.white,
),
onPressed: () {
print("You was clicked the button!");
},
),
body: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
"Kinds of Butoons and Images",
style: TextStyle(fontSize: 26, color: Colors.blue),
textAlign: TextAlign.center,
),
Container(
child: Expanded(
flex: 1,
child:Column(
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Row(
children: <Widget>[
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Column(
children: <Widget>[
CircleAvatar(
backgroundImage: AssetImage("assets/images/test.jpg"),
radius: 140,
),
Text(
"X",
),
],
),
),
),
),
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Column(
children: <Widget>[
Image(
image: AssetImage(
"assets/images/test.jpg"),
),
Text(
"X",
),
],
),
),
),
),
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
child: Column(
children: <Widget>[
Image(
image: AssetImage(
"assets/images/test.jpg"),
),
Text(
"X",
),
],
),
),
),
),
],
),
),
),
],
),
),
],
),
),
),
Container(
child: Expanded(
flex: 1,
child:Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Row(
children: <Widget>[
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Column(
children: <Widget>[
CircleAvatar(
backgroundImage: AssetImage("assets/images/test.jpg"),
radius: 140,
),
Text(
"X",
),
],
),
),
),
),
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Column(
children: <Widget>[
Image(
image: AssetImage(
"assets/images/test.jpg"),
),
Text(
"X",
),
],
),
),
),
),
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
child: Column(
children: <Widget>[
Image(
image: AssetImage(
"assets/images/test.jpg"),
),
Text(
"X",
),
],
),
),
),
),
],
),
),
),
],
),
),
],
),
),
),
],
),
),
);
}
}
Solution
To limit CircleAvatar's height, use LayoutBuilder and ConstrainedBox:
LayoutBuilder(
builder: (context, constraints) {
return ConstrainedBox(
constraints: BoxConstraints(
maxHeight: constraints.maxWidth,
maxWidth: constraints.maxWidth
),
child: CircleAvatar(
backgroundImage: NetworkImage('...'),
radius: 140,
),
);
}
),
