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