Наложение флаттера на жатку - PullRequest
0 голосов
/ 01 мая 2020

Я пытаюсь описать дизайн оверлея Flutter Stpeer на панели приложений. Не могли бы вы помочь мне, как мы можем добиться этого ниже дизайна экрана. enter image description here

Я пробовал ниже код:

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

Заранее спасибо, перепробовал все возможные случаи, но не смог реализовать вышеуказанный экран, не могли бы вы помочь мне, как мы будем решать эту проблему.

...