Состояние флаттера включеноПрессован на RaisedButton - PullRequest
Новая
       16

Состояние флаттера включеноПрессован на RaisedButton

0 голосов
/ 26 августа 2018

Я создаю приложение для викторины, которое показывает объяснение правильного ответа после того, как пользователь отправляет свой выбранный ответ.

На макете есть две кнопки - «Следующий вопрос» и «Отправить ответ».

В исходном состоянии кнопка «Следующий вопрос» неуловима, так как на нее нельзя нажимать, а кликабельны только кнопки «Отправить ответ».

Нажмите здесь, чтобы просмотреть макетначального состояния

При нажатии кнопки «Отправить ответ» должны произойти два действия:1. Затем кнопка «Отправить ответ» становится тонкой и не реагирующей на нажатия, а кнопка «Следующий вопрос» становится жирной и яркой и, конечно же, нажимаемой.2. Кроме того, под строкой двух кнопок появляется дополнительный раздел (возможно, другой контейнер, я не знаю), раскрывающий объяснение правильного ответа.

Мне нужна помощь в реализациивыше два действия

Пока, это код, который у меня есть: 

Widget nextQuestion = new RaisedButton(
  padding: const EdgeInsets.all(10.0),
  child: const Text('Next Question'),
  color: Color(0xFFE9E9E9),
  elevation: 0.0,
  onPressed: () {
    null;
  },
);

Widget submitAnswer = new RaisedButton(
  padding: const EdgeInsets.all(10.0),
  child: const Text('Submit Answer'),
  color: Color(0xFFE08284),
  elevation: 5.0,
  onPressed: () {
    null;
  },
);

return Scaffold(
  body: new CustomScrollView(
    slivers: <Widget>[
      new SliverPadding(
        padding: new EdgeInsets.all(0.0),
        sliver: new SliverList(
          delegate: new SliverChildListDelegate([
            new Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[nextQuestion, submitAnswer]),
            new SizedBox(height: 50.0),
          ]),
        ),
      ),
    ],
  ),
);

1 Ответ

0 голосов
/ 26 августа 2018

вы можете реализовать, используя setState метод.

Я реализую что-то подобное, просто пройди через это. 

import 'package:flutter/material.dart';

  void main() {
    runApp(MaterialApp(
      title: 'Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(),
      },
    ));
  }


  class FirstScreen extends StatefulWidget {
    @override
    _FirstScreenState createState() => _FirstScreenState();
  }

  class _FirstScreenState extends State<FirstScreen> {
    int submit = 0;

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: AppBar(
            title: Text("Demo"),
          ),
          body: new Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Row(
                children: <Widget>[
                  new RaisedButton(
                      padding: const EdgeInsets.all(10.0),
                      child: const Text('Next Question'),
                      color: submit == 0 ? Color(0xFFE9E9E9) : Colors.grey,
                      elevation: 0.0,
                      onPressed: () {
                        submit == 0 ? null : Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => SecondScreen()),
                        );
                      }
                  ),
                  new RaisedButton(
                    padding: const EdgeInsets.all(10.0),
                    child: const Text('Submit Answer'),
                    color: Color(0xFFE08284),
                    elevation: 0.0,
                    onPressed: () {
                      setState(() {
                        submit = 1;
                      });
                    },
                  ),
                ],
              ),
              submit == 1 ? new Container(
                child: new Text("hello World"),
              ) : new Container()
            ],
          )
      );
    }
  }



  class SecondScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("Second Screen"),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text('Go back!'),
          ),
        ),
      );
    }
  }
...