[ad_1]
i make two web page and use the expanded widgte..however not responsive in small display screen…
when use very small font in my app will okay…(im use auto measurement textual content however not okay)
please watch my code and assist me for responsive app
additionally i take advantage of mediaquery however not okay
thanks
const BottomContainerHeight = 80.0;
class InputPage extends StatefulWidget {
const InputPage({Key? key}) : tremendous(key: key);
@override
_InputPageState createState() => _InputPageState();
}
enum Gender {
male,
feminine,
}
class _InputPageState extends State<InputPage> {
late Gender selectedGender = Gender.feminine;
int top = 180;
int weight = 70;
int age = 24;
@override
Widget construct(BuildContext context) {
Measurement screenSize = MediaQuery.of(context).measurement;
Orientation orientation = MediaQuery.of(context).orientation;
return Scaffold(
backgroundColor: Colours.white,
appBar: AppBar(
title: const Textual content(
" bmiÙ…Øاسبه ",
fashion: TextStyle(shade: Colours.white, fontSize: 25.0),
),
flexibleSpace: Container(
ornament: BoxDecoration(
gradient: LinearGradient(
colours: [
const Color(0xFF3366FF),
const Color(0xFF00CCFF),
],
start: const FractionalOffset(0.0, 0.0),
finish: const FractionalOffset(1.0, 0.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp),
),
),
centerTitle: true,
elevation: 3.0,
shadowColor: Colours.redAccent,
form: RoundedRectangleBorder(
borderRadius: BorderRadius.solely(
bottomLeft: Radius.round(20.0),
bottomRight: Radius.round(20.0))),
),
physique: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
top: MediaQuery.of(context).measurement.top,
width: MediaQuery.of(context).measurement.width,
little one: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
youngsters: [
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,
little one: ReusableCard(
onPress: () {},
color: [Color(0xff5f72bd), Color(0xff9b23ea)],
//color: Shade(0xFF65E655),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.heart,
youngsters: [
Text(
':میزان قد شما',
style: labelTextStyle,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text(
'سانتیمتر',
style: labelTextStyle,
),
Text(
height.toString(),
style: numTextStyle,
)
],
),
SliderTheme(
knowledge: SliderTheme.of(context).copyWith(
inactiveTrackColor: Colours.white,
activeTrackColor: Colours.amberAccent,
thumbColor: Colours.amber,
overlayColor: Shade(0x1fFFF176),
thumbShape: RoundSliderThumbShape(
enabledThumbRadius: 15.0)
//form ra bozorgtr mikonad...
,
overlayShape: RoundSliderOverlayShape(
overlayRadius: 30.0) //saye dor form miandzad
),
little one: Slider(
worth: top.toDouble(),
min: 120.0,
max: 220.0,
onChanged: (double newValue) {
setState(() {
top = newValue.spherical();
});
},
),
),
],
),
),
),
Expanded(
flex: 1,
little one: Row(
youngsters: [
Expanded(
child: ReusableCard(
onPress: () {},
colour: [Colors.teal, Colors.tealAccent],
//color: Shade(0xFF65E655),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.heart,
youngsters: [
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,
little one: ReusableCard(
onPress: () {},
color: [Color(0xfff9d423), Color(0xfff83600)],
//color: Shade(0xFF65E655),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.heart,
youngsters: [
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(top: top, weight: weight);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ResultPage(
bmiResult: calc.calculateBmi(),
resultText: calc.getResult(),
feedBack: calc.getFeedBack(),
)));
},
bottonTitle: 'Ù…Øاسبه',
),
],
),
);
}));
}
}
and please watch consequence web page like my house display screen web page
thanks for assist me
class ResultPage extends StatelessWidget {
ResultPage({required this.bmiResult,
required this.resultText,
required this.feedBack});
ultimate String bmiResult;
ultimate String resultText;
ultimate String feedBack;
@override
Widget construct(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colours.pink,
flexibleSpace: Container(
ornament: BoxDecoration(
gradient: LinearGradient(
colours: [
const Color(0xFF3366FF),
const Color(0xFF00CCFF),
],
start: const FractionalOffset(0.0, 0.0),
finish: const FractionalOffset(1.0, 0.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp)),
),
title: Textual content(
' bmiÙ…Øاسبه ',
fashion: TextStyle(
fontFamily: 'belongings/fonts/iraniansans', shade: Colours.white),
),
),
physique: SizedBox(
top: MediaQuery
.of(context)
.measurement
.top,
width: MediaQuery
.of(context)
.measurement
.width,
little one: Column(
youngsters: [
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.round(10.0)),
little one: Expanded(
little one: Column(
mainAxisAlignment: MainAxisAlignment.heart,
youngsters: [
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,
little one: BottomBotton(
bottonTitle: 'Ù…Øاسبه دوباره',
onTap: () {
Navigator.pop(context);
}),
)
],
),
));
}
}
[ad_2]
