Я пытаюсь описать дизайн оверлея Flutter Stpeer на панели приложений. Не могли бы вы помочь мне, как мы можем добиться этого ниже дизайна экрана.
Я пробовал ниже код:
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(
234,
241,
249,
1,
),
appBar: EmptyAppBar(),
//body: StepperView(),
body: ListView(
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: 150.0,
width: double.infinity,
color: Color.fromRGBO(
28,
43,
82,
1,
),
),
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.white,
),
onPressed: () => Navigator.pop(context, false),
),
SizedBox(
width: MediaQuery.of(context).size.width / 8,
),
Text(
"Dummy Data",
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontFamily: 'Roboto',
),
),
],
),
SizedBox(
height: 20.0,
),
Padding(
padding: EdgeInsets.fromLTRB(
20,
0,
20,
10,
),
child: Container(
height: MediaQuery.of(context).size.height / 1.39,
width: MediaQuery.of(context).size.width,
child: Material(
elevation: 1.0,
color: Colors.white,
borderRadius: BorderRadius.circular(
10.0,
),
child: Padding(
padding: EdgeInsets.only(
left: 0.0,
),
child: SizedBox(
height: MediaQuery.of(context).size.height - 100,
child: Padding(
padding: EdgeInsets.all(
10.0,
),
child: StepperView(),
),
),
),
),
),
),
],
),
],
),
],
),
);
}
}
StepperView Код указан здесь
class _StepperViewState extends State<StepperView> {
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.fromLTRB(
0,
0,
0,
0,
),
child: Stack(
children: <Widget>[
Positioned(
top: 30,
child: _typeStep(),
),
],
),
);
}
int currentStep = 0;
List<Step> spr = <Step>[];
List<Step> _getSteps() {
spr = <Step>[
Step(
state: _getState(1),
title: Text("Step 1"),
content: new Wrap(
children: <Widget>[StepOneView()],
),
isActive: (currentStep == 0 ? true : false)),
Step(
title: Text("Step 2"),
content: new Wrap(
children: <Widget>[StepTwoView()],
),
isActive: (currentStep == 1 ? true : false),
state: _getState(2),
)
];
return spr;
}
StepState _getState(int i) {
if (currentStep >= i)
return StepState.complete;
else
return StepState.indexed;
}
Widget _typeStep() => Container(
child: Theme(
data: ThemeData(
canvasColor: Color.fromRGBO(
28,
43,
82,
1,
),
),
child: Stepper(
controlsBuilder: (BuildContext context,
{VoidCallback onStepContinue, VoidCallback onStepCancel}) {
return Padding(
padding: EdgeInsets.all(0.0),
child: RaisedButton(
onPressed: () {
setState(() {
currentStep < spr.length - 1
? currentStep += 1
: currentStep = 0;
});
},
color: Colors.red,
textColor: Colors.white,
child: Text('Next'),
),
);
},
steps: _getSteps(),
currentStep: currentStep,
type: StepperType.horizontal,
onStepTapped: (step) {
setState(() {
currentStep = step;
print(step);
});
},
onStepCancel: () {
setState(() {
currentStep > 0 ? currentStep -= 1 : currentStep = 0;
});
},
onStepContinue: () {
setState(() {
currentStep < spr.length - 1
? currentStep += 1
: currentStep = 0;
});
},
),
),
);
}
Заранее спасибо, перепробовал все возможные случаи, но не смог реализовать вышеуказанный экран, не могли бы вы помочь мне, как мы будем решать эту проблему.