How do I use Flutter expanded widget to fill entire screen?

Question

I have been experimenting with Flutter trying to recreate an app that I wrote for Android 5 years ago. But I can't seem to get the layout to work very well. I have tried a number of different widgets, but each time I try something, it seems like I am taking 2 steps forward and 3 steps back.

The app is going to be vertical position only.

• Simple banner image at the top.
• A trivia question.
• Radio button group with 4 answers.
• Then 2 buttons - 'Check Answer' and 'Skip Question'
• Bottom bar

I am trying to make sure that the radio buttons and the buttons don't bounce around when the question changes.

This is what I have

This is what I would like

And this is the code that I have been fighting with.

Any help or tips would be greatly appreciated.

 class _MyHomePageState extends State<MyHomePage> {
  final TriviaBloc _triviaBloc = TriviaBloc();
  TriviaQuestion _initTriviaQuestion = new TriviaQuestion('', '', '', '', '', 1, 1);
  String _selectedAnswer = "";
  TextStyle _answerStyle = new  TextStyle(textBaseline: TextBaseline.alphabetic, fontStyle: FontStyle.normal, fontFamily: 'QarmicsansAbridged', fontSize: 16);



 @override
  void dispose() {
    _triviaBloc.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orangeAccent,

  body: SafeArea(
    minimum: const EdgeInsets.all(16.0),
    child:

    Column(children: [

      ImageBanner("assets/header_2.jpg"),

    Expanded(
        child:
      StreamBuilder<TriviaQuestion>(
          initialData: _triviaBloc.getInitialTriviaQuestion(),
          //_initTriviaQuestion,
          stream: _triviaBloc.triviaQuestionStream,
          //initialData: _triviaBloc.getInitialTriviaQuestion(),
          //builder: (BuildContext context, AsyncSnapshot<TriviaQuestion> snapshot)

          builder: (BuildContext context, snapshot) {
            //_triviaBloc.getTriviaQuestion(snapshot, context);

            if (snapshot.data != null) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  SizedBox(height: 15),
                  Padding(
                    padding: EdgeInsets.all(2.0),
                    child: TriviaAutoSizeText(context, snapshot.data.Question),
                  ),

                    RadioButtonGroup(
                        labels: <String>[
                          snapshot.data.IncorrectAnswer1,
                          snapshot.data.IncorrectAnswer2,
                          snapshot.data.CorrectAnswer,
                          snapshot.data.IncorrectAnswer3
                        ],
                        labelStyle: _answerStyle,
                        onSelected: (String selected) => _selectedAnswer = selected),
                  //),

                  SizedBox(height: 10),
                  new InkWell(
                    onTap: () => {_triviaBloc.checkAnswer(QuestionAnswered(_selectedAnswer))},
                    child: new Container(
                      width: MediaQuery.of(context).size.width * 0.5,
                      height: 50.0,
                      decoration: new BoxDecoration(
                        color: _butttonInteriorColour,
                        //Colors.blueAccent,
                        border:
                            new Border.all(color: Colors.white, width: 1.0),
                        borderRadius: new BorderRadius.circular(20.0),
                      ),
                      child: new Center(
                        child: new Text(
                          'Check Answer',
                          style: new TextStyle(
                              fontSize: 18.0, color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 10),
                  new InkWell(
                    onTap: () =>
                        {_triviaBloc.getTriviaQuestion(snapshot, context)},
                    child: new Container(
                      width: MediaQuery.of(context).size.width * 0.5,
                      height: 50.0,
                      decoration: new BoxDecoration(
                        color: _butttonInteriorColour,
                        //Colors.blueAccent,
                        border:
                            new Border.all(color: Colors.white, width: 1.0),
                        borderRadius: new BorderRadius.circular(20.0),
                      ),
                      child: new Center(
                        child: new Text(
                          'Next Question',
                          style: new TextStyle(
                              fontSize: 18.0, color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                ],
              );
            } else {
              return Center(child: CircularProgressIndicator());
            }
            ;
          }),
    )]),
  ),
  bottomNavigationBar: buildBottomNav(context),
);

} }

Answer 1

So you want the 4 button group and the 2 buttons at the bottom without changing position ?

Maybe a Spacer will help with that

        if (snapshot.data != null) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max, //replace this to fill everything
            children: <Widget>[
              SizedBox(height: 15),
              Padding(
                padding: EdgeInsets.all(2.0),
                child: TriviaAutoSizeText(context, snapshot.data.Question),
              ),
              Spacer(), //add the spacer here 
                RadioButtonGroup(
                    labels: <String>[