在 Flutter 中的小部件之间切换的最佳方式是什么？

Question

hope that you're doing well!

I was just wondering, what is the best way for switching between widgets in Flutter? For instance, let's say I'm asking the user 5 questions. What is the best way to move between the questions? Should I make a separate screen for each one of the questions and navigate between them, keep a question index and use a switch statement to return the different questions, or is there something that is better and cleaner?

I'm currently using the index & switch statement approach and this is essentially what my code looks like:

int questionIndex = 0;

Widget getQuestion(int index) {
  Widget questionWidget;
  switch (questionIndex) {
    case 0:
      questionWidget = Question0;
      break;
    case 1:
      questionWidget = Question1;
      break;
    ...
    default:
      questionWidget = Question0;
      break;
  }
  return questionWidget;
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kLightGrey,
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(25.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              getQuestion(questionIndex),
              MaterialButton(
                child: Text('Next'),
                onPressed: () {
                  questionIndex++;
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

You can also use PageView widget to add swipe gestures and animation when going to next/previous questions.

class MyHomePage extends StatelessWidget {
  final PageController _controller = PageController();

  @override
  Widget build(BuildContext context1) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: PageView(
              controller: _controller,
              children: const [
                Center(child: Text('Question 1')),
                Center(child: Text('Question 2')),
                Center(child: Text('Question 3')),
                Center(child: Text('Question 4')),
                Center(child: Text('Question 5')),
              ],
            ),
          ),
          RaisedButton(
            onPressed: () => _controller.nextPage(
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeIn,
            ),
            child: const Text('Next'),
          ),
        ],
      ),
    );
  }
}

Answer 2

You can use loop your questions and use a ValueNotifier for instance to update your Page depending on the question index contained in your variable