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

} }

Answer 1

因此，您希望底部的4个按钮组和2个按钮不改变位置吗？

也许垫片会帮助您解决这个问题

text/javascript

如何使用Flutter扩展小部件填充整个屏幕？

1 个答案: