Como adicionar um TabBar no AppBar no Flutter?

Nov 03 2020

Eu tenho um AppBar conforme definido abaixo. Quero adicionar um TabBar abaixo dele. Quando tento fornecê-lo na bottom:propriedade do AppBar, ele lança um erro renderflex: This is my 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,
                ),
              ),
            ),
          ),
        ],
      )),
    );
  }

Esta é a aparência do appBar:

Respostas

1 LalitM Nov 03 2020 at 15:48

Provavelmente você está tentando isso

@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(),
          ),
        ),
      ),
    );