如何使用api响应填充flutter tabBar

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

class MyTabBar extends StatefulWidget {
  @override
  _MyTabBarState createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar> {
  Future<List<String>> fetchData() async {
    final response = await http.get('https://api.example.com/tabs');
    if (response.statusCode == 200) {
      final data = json.decode(response.body);
      List<String> tabs = [];
      for (var tab in data['tabs']) {
        tabs.add(tab['name']);
      }
      return tabs;
    } else {
      throw Exception('Failed to fetch data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<String>>(
      future: fetchData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('Error: ${snapshot.error}'));
        } else {
          return DefaultTabController(
            length: snapshot.data.length,
            child: Scaffold(
              appBar: AppBar(
                title: Text('My TabBar'),
                bottom: TabBar(
                  tabs: snapshot.data.map((tab) => Tab(text: tab)).toList(),
                ),
              ),
              body: TabBarView(
                children: snapshot.data.map((tab) => Text(tab)).toList(),
              ),
            ),
          );
        }
      },
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyTabBar(),
  ));
}