Comment ajouter un TabBar dans AppBar dans Flutter?

Nov 03 2020

J'ai une AppBar telle que définie ci-dessous. Je veux ajouter un TabBar en dessous. Lorsque j'essaye de le fournir dans la bottom:propriété de l'AppBar, cela génère une erreur de renderflex: c'est mon code:

Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
          body: Stack(
        children: [
          Positioned(
            top: 15,
            left: 15,
            right: 15,
            child: SafeArea(
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: AppBar(
                  title: Text('Hello', style: kTasksStyle),
                  centerTitle: true,
                  backgroundColor: kGreen,
                ),
              ),
            ),
          ),
        ],
      )),
    );
  }

Voici à quoi ressemble l'appBar:

Réponses

1 LalitM Nov 03 2020 at 15:48

Vous essayez probablement de ça

@override
  Widget build(BuildContext context) {
    final List<Tab> myTabs = <Tab>[
      Tab(text: 'LEFT'),
      Tab(text: 'RIGHT'),
    ];
    return DefaultTabController(
      length: 2,
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text("Hello"),
            centerTitle: true,
            bottom: TabBar(
              tabs: myTabs,
            ),
          ),
          body: TabBarView(
            children: myTabs.map((Tab tab) {
              final String label = tab.text.toLowerCase();
              return Center(
                child: Text(
                  'This is the $label tab',
                  style: const TextStyle(fontSize: 36),
                ),
              );
            }).toList(),
          ),
        ),
      ),
    );