CODEWITHSUNDEEP
flutter
user987654
user987654

Reputation: 6011

flutter: dynamically adding / removing tabs in TabBarView

I'd like to make ebook like app, which has a very long list of pages, and I can swipe left or right to go to the next/previous page. Because we'll have thousands of pages and the number of pages can vary depending on the length of the book, it'll not make sense to build all the pages at the beginning.

What I'm trying is using a TabBarView with 3 initial pages (previous - current - next pages), and dynamically add and remove tabs whenever the user swipe to left or right.

I made a simplified version here:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyTabbedPage(),
    );   } }

class MyTabbedPage extends StatefulWidget {   const MyTabbedPage({Key key}) : super(key: key);

  @override   _MyTabbedPageState createState() => new
_MyTabbedPageState(); }

class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {   int num = 4;   final List<Tab> myTabs = <Tab>[
    new Tab(text: '1'),
    new Tab(text: '2'),
    new Tab(text: '3'),   ];

  TabController _tabController;

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

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

  void _handleTabChange() {
    myTabs.add(new Tab(text: num.toString()));
    myTabs.removeAt(0);
    _tabController.animateTo(1);   }

  @override   Widget build(BuildContext context) {
    return new Scaffold(
      body: new TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          return new Center(child: new Text(tab.text));
        }).toList(),
      ),
    );   } }

My intention here is that

But it doesn't add or remove the pages, I only have tab1, 2, 3 after swipe.

My question is

Upvotes: 1

Views: 2444

Answers (1)

Mazin Ibrahim
Mazin Ibrahim

Reputation: 7869

Is there a better way to make this ebook swipe UI than TabBarView?

yes, there PageView widget.

If the answer is yes, how can I fix this issue?

PageView forces each of its children or Pages to expand to take all the space available, which is what you wanted to achieve in the first place by using TabView. Also, it gives you the ability to construct the Pages on the fly using PageView.builder which is similar to ListView.builder by explicitly specifying the number of pages, and the mechanism to construct each one when needed. This will significantly improve the performance of your app.PageView class also provides you with professional effects like those provided by famous eBook readers like PageSnapping effect.

If you rather want to build a customized PageView you can use the PageView.custom constructor.

Upvotes: 3

Related Questions