Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to make Tabbed View's data remain different on tab change #1

Closed
b14cknc0d3 opened this issue Aug 5, 2021 · 5 comments
Closed
Assignees
Labels
enhancement New feature or request

Comments

@b14cknc0d3
Copy link

I have a page call DataPage which is a stateful widget
I added ApiPageData to TabData

    TabData(text: "", content: ApiPagedata(), closable: false)
  ];

I populated three API pages (have multiple forms) in initState.

@override
  void initState() {
    for (int i = 1; i < 3; i++) {
      tabs.add(TabData(
        text: "Tab $i",
        content: ApiPagedata(),
      ));
    }
    _model = TabbedViewController(tabs);
     super.initState();
  }

my tabbedView

TabbedView tabbedView = TabbedView(
      controller: _model,
    
    );
 return Scaffold(
        body: Container(child: tabbedView, padding: EdgeInsets.all(32)));


example apipagedata

Statefulwidget--ApiPagedata-->column-->forms

What I want is like a web browser each page must be independent , in TabBarView I can do it with AutomaticKeepAliveClientMixin.

@caduandrade
Copy link
Owner

caduandrade commented Aug 5, 2021

Hi! Correct me if I got it wrong ok?

I believe that in your case, you need to keep your data in the State class. When changing tabs, Flutter reconstructs the screen because the old tab content is removed from the tree. At this moment, the data may disappear.

This is an example with a text field. If you don't keep the field controller, the typed text is lost:

import 'package:flutter/material.dart';
import 'package:tabbed_view/tabbed_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyPage(),
    );
  }
}

class MyPage extends StatefulWidget {
  @override
  MyPageState createState() => MyPageState();
}

class MyPageState extends State<MyPage> {
  late TabbedViewController _tabbedViewController;
  Map<int, TextEditingController> _fieldControllers =
      Map<int, TextEditingController>();

  @override
  void initState() {
    List<TabData> tabs = [];
    for (var i = 1; i < 5; i++) {
      _fieldControllers[i] = TextEditingController();
      TextField field = TextField(
        controller: _fieldControllers[i],
        decoration: InputDecoration(border: OutlineInputBorder()),
      );
      tabs.add(TabData(text: 'Tab $i', content: field));
    }

    _tabbedViewController = TabbedViewController(tabs);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: TabbedView(controller: _tabbedViewController));
  }
}

Is this your problem with ApiPagedata?

I can analyze the cost of implementing AutomaticKeepAliveClientMixin in TabbedView as well.

@caduandrade
Copy link
Owner

I'm thinking of providing a solution similar to Flutter's AutomaticKeepAliveClientMixin.

Perhaps it could also allow storing data directly in the TabData class.

@caduandrade caduandrade self-assigned this Aug 8, 2021
@caduandrade caduandrade added enhancement New feature or request in progress labels Aug 8, 2021
@caduandrade
Copy link
Owner

The solution will be the keepAlive parameter in the TabData class to keep the tab widget always in memory.

It is possible to manage sensitive data by storing them in the value of the TabData class.

@caduandrade
Copy link
Owner

Done. Available in version 1.2.0.

@b14cknc0d3
Copy link
Author

sorry for late reply .i fixed using AutomaticKeepAliveClientMixin,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants