Cara Mudah Menampilkan Tab Tetap Pada Flutter

Memastikan possible untuk menampilkan data tetap pada tab di dalam aplikasi.

2. Menjalankan Tab Persistent

Contoh

susunan directory

❏ lib
    ❏ main.dart
    ❏ persistent.dart
    ❏ non_persistent.dart

lib/main.dart

import 'package:flutter/material.dart';
import 'package:my_app/non_persistent.dart';
import 'package:my_app/persistent.dart';

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Persistent Tab Demo',
            theme: ThemeData(
            primarySwatch: Colors.blue,
            fontFamily: "Arial",
            textTheme: TextTheme(
                button: TextStyle(color: Colors.white, fontSize: 18.0),
                title: TextStyle(color: Colors.red))),
            home: MyHomePage(),
        );
    }
}

class MyHomePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return DefaultTabController(
            length: 2,
            child: Scaffold(
                appBar: AppBar(
                    bottom: TabBar(
                        isScrollable: true,
                        tabs: [
                            Tab(icon: Icon(Icons.directions_car), text: "Non persistent", ),
                            Tab(icon: Icon(Icons.directions_transit), text: "Persistent", ),
                        ],
                    ),
                    title: Text('Persistent Tab Demo'),
                ),
                body: TabBarView(
                    children: <Widget>[
                        NonPersistent(),
                        Persistent(),
                    ],
                ),
            ),
        );
    }
}

lib/non_persistent.dart

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

import 'dart:async';
import 'dart:convert';

class NonPersistent extends StatefulWidget {
    @override
    _NonPersistentState createState() => _NonPersistentState();
}

class _NonPersistentState extends State<NonPersistent> {
    var list = List();
    
    _loadList() async {
        final response = await http.get(Uri.parse("https://jsonplaceholder.typicode.com/posts/"));
        if (response.statusCode == 200) {
            await Future.delayed(const Duration(seconds: 1));
            if (mounted) setState( () => list = json.decode(response.body) as List );
        } else {
            throw Exception('Failed to load posts');
        }
    }
    
    @override
    void initState() {
        super.initState();
        _loadList();
    }
    
    @override
    Widget build(BuildContext context) {
        return Column(
            children: <Widget>[
                Expanded(
                    child: ListView.builder(
                        itemCount: list.length,
                        itemBuilder: (BuildContext context, int index) {
                            final data = list[index];
                            return ListTile(
                                contentPadding: EdgeInsets.all(10.0),
                                title: Text(data['title']),
                                subtitle: Text(
                                    data['body'],
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                ),
                            );
                        },
                    ),
                ),
            ],
        );
    }
}

lib/persistent.dart

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

import 'dart:async';
import 'dart:convert';

class Persistent extends StatefulWidget {
    @override
    _PersistentState createState() => _PersistentState();
}

class _PersistentState extends State<Persistent> with AutomaticKeepAliveClientMixin<Persistent> {
    var list = List();
    
    _loadList() async {
        final response = await http.get(Uri.parse("https://jsonplaceholder.typicode.com/photos/"));
        if (response.statusCode == 200) {
            await Future.delayed(const Duration(seconds: 1));
            if (mounted) setState( () => list = json.decode(response.body) as List );
        } else {
            throw Exception('Failed to load posts');
        }
    }
    
    @override
    void initState() {
        super.initState();
        _loadList();
    }
    
    @override
    Widget build(BuildContext context) {
        super.build(context);
        return Column(
            children: <Widget>[
                Expanded(
                    child: ListView.builder(
                        itemCount: list.length,
                        itemBuilder: (BuildContext context, int index) {
                            final data = list[index];
                            return ListTile(
                                contentPadding: EdgeInsets.all(10.0),
                                title: Text(data['title']),
                                trailing: Image.network(
                                    data['thumbnailUrl'],
                                    height: 20.0,
                                    width: 20.0,
                                ),
                            );
                        },
                    ),
                ),
            ],
        );
    }
    
    @override
    bool get wantKeepAlive => true;
}

Sekian untuk kali ini semoga bermanfaat :D untuk lebih lanjut bisa kunjungi link tersebut.