Flutter Set State onPressed on RaisedButton

Question

I am building a quiz app which reveals the explanation for the correct answer after the user submits their chosen answer.

There are two buttons on the layout -- "Next Question" & "Submit Answer."

In the initial state, the "Next Question" button is subtle as it is not clickable and only the "Submit Answer" buttons is clickable.

Click Here to View the Layout of the Initial State

When the "Submit Answer" button is clicked, two actions should happen:
1. The "Submit Answer" button then becomes subtle and not clickable and the "Next Question" button becomes bold and vibrant and, of course, clickable.
2. Also, below the row of the two buttons, an additional section appears (another container maybe, i don't know) revealing the explanation for the correct answer.

I'd like some help in implementing the above two actions

So far, this is the code that I have:

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

Answer 1

you can implement using setState method.

i implement something like that just go through that.

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