Я экспериментировал с Flutter, пытаясь воссоздать приложение, которое я написал для Android 5 лет назад. Но я не могу заставить макет работать очень хорошо. Я пробовал несколько разных виджетов, но каждый раз, когда я что-то пробую, мне кажется, что я делаю 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),
);

}}

0
Jay MacDonald 27 Окт 2019 в 21:31

1 ответ

Лучший ответ

Итак, вы хотите, чтобы группа из 4 кнопок и 2 кнопки внизу не меняли своего положения?

Может быть, в этом поможет спейсер

        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>[
1
ValdaXD 27 Окт 2019 в 21:48