Как создать прокручиваемые вкладки со следующими и предыдущими кнопками в flutter

#flutter #dart #flutter-layout

#flutter #dart #flutter-макет

Вопрос:

Я пытаюсь создать прокручиваемый список вкладок с кнопками next и previous, чтобы при нажатии на эту кнопку я видел следующие скрытые вкладки, которых не было в представлении. и наоборот.введите описание изображения здесь
введите описание изображения здесь

обратите внимание на кнопки.

У меня было это до сих пор, но я не могу определить, какие вкладки находятся в представлении, и действовать соответствующим образом, может кто-нибудь любезно помочь.

 class NewEntryPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => NewEntryPageState();
}

class NewEntryPageState extends State<NewEntryPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
  ];

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: myTabs.length);
  }

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

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Column(
      children: <Widget>[
        Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          padding: const EdgeInsets.all(10.0),
          color: Colors.white,
          child: Column(
            children: <Widget>[
              Container(
                child: Row(
                  children: [
                    IconButton(
                      icon: Icon(Icons.arrow_back_ios),
                      onPressed: () {
                        if (_tabController.index > 0) {
                          _tabController.animateTo(_tabController.index - 1);
                        } else {
                          Scaffold.of(context).showSnackBar(SnackBar(
                            content: Text("Can't go back"),
                          ));
                        }
                      },
                    ),
                    Expanded(
                      child: TabBar(
                        isScrollable: true,
                        controller: _tabController,
                        labelStyle: TextStyle(color: Colors.black),
                        unselectedLabelColor: Colors.black,
                        labelColor: Colors.blue,
                        tabs: List.generate(
                          20,
                          (index) {
                            return Tab(
                              text: "Tab $index",
                            );
                          },
                        ),
                      ),
                    ),
                    IconButton(
                      icon: Icon(Icons.arrow_forward_ios),
                      onPressed: () {
                        if (_tabController.index   1 < 20) {
                          _tabController.animateTo(_tabController.index   1);
                        } else {
                          Scaffold.of(context).showSnackBar(SnackBar(
                            content: Text("Can't move forward"),
                          ));
                        }
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

  

это то, что делает этот код

введите описание изображения здесь

Комментарии:

1. На кнопках back и next вы обновляете значение вашего контроллера вкладок. Вы должны создать список вкладок с возможностью прокрутки, и чтобы кнопки обновляли состояние ScrollController, а не TabController. TabController обновляет текущую выбранную вкладку вместе с положением прокрутки.

2. не могли бы вы, пожалуйста, нанести немного грязи на свои руки и предоставить ответ с некоторым кодом, также, если последняя вкладка (элемент) находится наполовину в представлении, я хочу, чтобы она была первой, полностью видимой при нажатии кнопки next или back @Apealed

3. @bihireboris ты закончил? Если да, то, пожалуйста, подскажите, как создать?

4. У меня есть, я оставлю ответ, когда буду свободен через 3 часа @ChiragKothiya