Iman Yarahmadi
Reputation: 122
No Responsive for any screen size
I make two page and use the expanded widgte..but not responsive in small screen... when use very small font in my app will ok...(im use auto size text but not ok) please watch my code and help me for responsive app also i use mediaquery but not ok
thank you
const BottomContainerHeight = 80.0;
class InputPage extends StatefulWidget {
const InputPage({Key? key}) : super(key: key);
@override
_InputPageState createState() => _InputPageState();
}
enum Gender {
male,
female,
}
class _InputPageState extends State<InputPage> {
late Gender selectedGender = Gender.female;
int height = 180;
int weight = 70;
int age = 24;
@override
Widget build(BuildContext context) {
Size screenSize = MediaQuery.of(context).size;
Orientation orientation = MediaQuery.of(context).orientation;
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text(
" bmiمحاسبه ",
style: TextStyle(color: Colors.white, fontSize: 25.0),
),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFF3366FF),
const Color(0xFF00CCFF),
],
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(1.0, 0.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp),
),
),
centerTitle: true,
elevation: 3.0,
shadowColor: Colors.redAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0))),
),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
flex: 1,
child: Row(
children: [
Expanded(
child: SizedBox(
height: constraints.maxHeight * 0.5,
width: constraints.maxWidth * 0.5,
child: ReusableCard(
colour: selectedGender == Gender.female
? activeCardColoursFemale
: inactiveCardColoursFemale,
cardChild: IconContent(
height: constraints.maxHeight * 0.2,
width: constraints.maxWidth * 0.5,
svgPicture: 'assets/2.svg',
label: 'خانم',
),
onPress: () {
selectedGender = Gender.female;
},
),
),
),
Expanded(
child: SizedBox(
height: constraints.maxHeight * 0.9,
width: constraints.maxWidth * 0.5,
child: ReusableCard(
colour: selectedGender == Gender.male
? activeCardColoursMale
: inactiveCardColoursMale,
cardChild: IconContent(
height: constraints.maxHeight * 0.2,
width: constraints.maxWidth * 99,
svgPicture: 'assets/3.svg',
label: 'آقا',
),
onPress: () {
selectedGender = Gender.male;
},
),
),
),
],
)),
Expanded(
flex: 1,
child: ReusableCard(
onPress: () {},
colour: [Color(0xff5f72bd), Color(0xff9b23ea)],
//colour: Color(0xFF65E655),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
':میزان قد شما',
style: labelTextStyle,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text(
'سانتیمتر',
style: labelTextStyle,
),
Text(
height.toString(),
style: numTextStyle,
)
],
),
SliderTheme(
data: SliderTheme.of(context).copyWith(
inactiveTrackColor: Colors.white,
activeTrackColor: Colors.amberAccent,
thumbColor: Colors.amber,
overlayColor: Color(0x1fFFF176),
thumbShape: RoundSliderThumbShape(
enabledThumbRadius: 15.0)
//shape ra bozorgtr mikonad...
,
overlayShape: RoundSliderOverlayShape(
overlayRadius: 30.0) //saye dor shape miandzad
),
child: Slider(
value: height.toDouble(),
min: 120.0,
max: 220.0,
onChanged: (double newValue) {
setState(() {
height = newValue.round();
});
},
),
),
],
),
),
),
Expanded(
flex: 1,
child: Row(
children: [
Expanded(
child: ReusableCard(
onPress: () {},
colour: [Colors.teal, Colors.tealAccent],
//colour: Color(0xFF65E655),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'وزن',
style: labelTextStyle,
),
Text(
weight.toString(),
style: numTextStyle,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RoundIconButton(
icon: FontAwesomeIcons.minus,
color: Colors.greenAccent,
onPressed: () {
setState(() {
weight--;
});
}),
SizedBox(
width: 10.0,
),
RoundIconButton(
icon: FontAwesomeIcons.plus,
color: Colors.greenAccent,
onPressed: () {
setState(() {
weight++;
});
}),
],
)
],
),
),
),
Expanded(
flex: 1,
child: ReusableCard(
onPress: () {},
colour: [Color(0xfff9d423), Color(0xfff83600)],
//colour: Color(0xFF65E655),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'سن',
style: labelTextStyle,
),
Text(
age.toString(),
style: numTextStyle,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RoundIconButton(
icon: FontAwesomeIcons.minus,
color: Colors.orange,
onPressed: () {
setState(() {
age--;
});
}),
SizedBox(
width: 10.0,
),
RoundIconButton(
icon: FontAwesomeIcons.plus,
color: Colors.orange,
onPressed: () {
setState(() {
age++;
});
}),
],
)
],
),
),
),
],
)),
BottomBotton(
onTap: () {
CalculatorBrain calc =
CalculatorBrain(height: height, weight: weight);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ResultPage(
bmiResult: calc.calculateBmi(),
resultText: calc.getResult(),
feedBack: calc.getFeedBack(),
)));
},
bottonTitle: 'محاسبه',
),
],
),
);
}));
}
}
and please watch result page like my home screen page thank you for help me
class ResultPage extends StatelessWidget {
ResultPage({required this.bmiResult,
required this.resultText,
required this.feedBack});
final String bmiResult;
final String resultText;
final String feedBack;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFF3366FF),
const Color(0xFF00CCFF),
],
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(1.0, 0.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp)),
),
title: Text(
' bmiمحاسبه ',
style: TextStyle(
fontFamily: 'assets/fonts/iraniansans', color: Colors.white),
),
),
body: SizedBox(
height: MediaQuery
.of(context)
.size
.height,
width: MediaQuery
.of(context)
.size
.width,
child: Column(
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.bottomCenter,
child: Text(
'نتیجه تست شما',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'assets/font/iraniansans',
fontSize: 35.0,
fontWeight: FontWeight.bold,
color: Colors.red),
),
),
),
Expanded(
flex: 5,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
margin: EdgeInsets.all(13.0),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Color(0xfffff1eb), Color(0xfface0f9)],
),
borderRadius: BorderRadius.circular(10.0)),
child: Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/shakhes.png',
height: constraints.maxHeight * 0.5,
width: constraints.maxWidth * 99,
fit: BoxFit.fill,
),
SizedBox(
height: constraints.maxHeight * 0.4,
width: constraints.maxWidth * 0.9,
child: Column(
children: [Text(
resultText,
style: TextStyle(
fontFamily: 'assets/font/iraniansans',
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Colors.green),
),
Text(
bmiResult,
style: TextStyle(
fontFamily: 'assets/font/iraniansans',
fontSize: 30.0,
color: Colors.red),
),
Text(
feedBack,
style: TextStyle(
fontFamily: 'assets/font/iraniansans',
fontSize: 20.0,
color: Colors.black),
textDirection: TextDirection.rtl,
textAlign: TextAlign.center,
maxLines: 3,
),
],
),
),
],))
);
},
),
),
Expanded(
flex: 1,
child: BottomBotton(
bottonTitle: 'محاسبه دوباره',
onTap: () {
Navigator.pop(context);
}),
)
],
),
));
}
}
Upvotes: 1
Views: 82
Answers (2)
Navid Shokoufeh
Reputation: 579
You have to use @media query in fontSize of your texts too and it will be ok
Like this:
Text('نتیجه تست شما',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'assets/font/iraniansans',
fontSize: 35.0, // it is wrong
fontSize: MediaQuery.of(context).size.width/15, // true
fontWeight: FontWeight.bold,
color: Colors.red),
),
Also you need to use @media query in size of your pictures.
Upvotes: 0
Aloysius Samuel
Reputation: 1200
See the problem in your code is not with width and height, but with font size because font size differs from screen to screen. I would strongly recommend you to use sizer package to create responsive flutter apps. What this plugin does is that it define the size into the percent of your screen. For instance:
Container(
height: 20.0.h, //20% of the screen height
width: 20.0.w, //20% of the screen width
)
As far as font goes, you can define the size of the fonts by using sp keyword. Like this:
Text(
"Aloysius",
style: TextStyle(
fontSize: 15.0.sp
)
)
Upvotes: 1
Related Questions
- How to make flutter app responsive, for all kind of screens?
- How to make flutter app responsive according to different screen size?
- How can I make a Flutter app responsive according to different screen size?
- How can i fix my flutter app to be responsive in different screen sizes?
- Flutter responsiveness problem on various mobile devices
- How to get responsive Flutter layouts?
- How to make this flutter screen responsive according to different screen sizes?
- How to make the flutter app responsive?
- How can I make my layout responsive according to design spec?
- How to make this screen responsive in Flutter?