flutter-layout - 如何使用 Flutter 扩展小部件填满整个屏幕？

Question

我一直在尝试使用 Flutter 尝试重新创建我 5 年前为 Android 编写的应用程序。但我似乎无法让布局很好地工作。我尝试了许多不同的小部件，但每次我尝试某些东西时，我似乎都在向前走 2 步和向后退 3 步。

该应用程序将仅是垂直位置。

• 顶部的简单横幅图像。
• 一个琐事问题。
• 带有 4 个答案的单选按钮组。
• 然后是 2 个按钮 - “检查答案”和“跳过问题”
• 底栏

我试图确保当问题发生变化时单选按钮和按钮不会反弹。

这就是我所拥有的

这就是我想要的

这是我一直在努力的代码。

任何帮助或提示将不胜感激。

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

} }

标签： flutter-layout

Answer 1

所以你想要 4 个按钮组和底部的 2 个按钮而不改变位置？

也许 Spacer 会对此有所帮助

        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>[