dart 没有脚手架的DefaultTabController？

ubbxdtey 于 2023-09-28 发布在其他

关注(0)|答案(4)|浏览(123)

我尝试在一些小部件中间使用DefaultTabController。所以我的TabBar不能在AppBar中，必须关闭一些小部件。所以我的问题是当我使用TabBarView它崩溃.
这里有一个Flutter示例，但没有找到如何在没有Scaffold的情况下完成它。

final List<Tab> myTabs = <Tab>[
  Tab(text: 'LEFT'),
  Tab(text: 'RIGHT')];

代码

DefaultTabController(
  length: myTabs.length,
  child: Scaffold(
    appBar: 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(),
    ),
  ),
);

下面是另一个我应该做image的TabBar示例
真实的的代码

class ProfileTabBarNavigation extends StatelessWidget {
 final List<Tab> myTabs = <Tab>[
   const Tab(text: kArtwork),
   const Tab(text: kPastJobs)];
@override
Widget build(BuildContext context) {
return DefaultTabController(
  length: 2,
  initialIndex: 0,
  child: Padding(
    padding: kPaddingTabBar,
    child: Container(
      padding: EdgeInsets.all(5.0),
      decoration: BoxDecoration(
        color: kLightGrey,
        borderRadius: BorderRadius.all(
          Radius.circular(50),
        ),
      ),
      child: Column(children: <Widget>[
        TabBar(
          tabs: myTabs,
          unselectedLabelColor: Colors.black54,
          labelColor: Colors.black,
          unselectedLabelStyle: kBoldText,
          labelStyle: kBoldText,
          indicatorSize: TabBarIndicatorSize.tab,
          indicator: BoxDecoration(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(50),
            color: Colors.white,
          ),
        ),
        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(),
        ),
      ]),
    ),
  ),
);
}
}

dart

来源：https://stackoverflow.com/questions/60362159/defaulttabcontroller-without-scaffold

4条答案

按热度按时间

lokaqttq1#

用Expanded Package TabBarView。

Expanded(
 child: TabBarView(//...),
),

在DartPad上尝试

赞(0）回复(0）举报 2023-09-28

shyt4zoc2#

您可以在屏幕中间使用defaultTabView或使用以下软件包之一
Bubble Tab Indicator
MD2 Tab Indicator

赞(0）回复(0）举报 2023-09-28

dfddblmv3#

Create a stateful widget like below

  import 'package:flutter/material.dart';
  import 'package:flutter_text_to_image/utils/app_colors.dart';
  
  /*
  Title: TabBarWidget
  Purpose: To Display TabBar in a Screen
  Created On : 16/11/2022
  Last Updated on : 16/11/2022
  Author : Kalpesh Khandla
  */

  class TabBarWidget extends StatefulWidget {
  final String firstTabTxt;
  final String firstTabViewTxt;
  final String secondTabTxt;
  final String secondTabViewTxt;
  const TabBarWidget({
  super.key,
  required this.firstTabTxt,
  required this.secondTabTxt,
  required this.firstTabViewTxt,
  required this.secondTabViewTxt,
  });
  @override
  State
  <TabBarWidget>
  createState() => _TabBarWidgetState();
  }
  class _TabBarWidgetState extends State
  <TabBarWidget>
  with SingleTickerProviderStateMixin {
  TabController? _tabController;
  @override
  void initState() {
  _tabController = TabController(length: 2, vsync: this);
  super.initState();
  }
  @override
  void dispose() {
  _tabController?.dispose();
  super.dispose();
  }
  @override
  Widget build(BuildContext context) {
  return Container(
  height: 100,
  child: Column(
  children: [
  Container(
  height: 35,
  decoration: BoxDecoration(
  border: Border.all(
  color: AppColors.tabBorderColor,
  ),
  borderRadius: BorderRadius.circular(
  5.0,
  ),
  ),
  child: TabBar(
  controller: _tabController,
  indicator: BoxDecoration(
  gradient: LinearGradient(
  colors: [
  AppColors.waterMelonColor,
  AppColors.mangoColor,
  AppColors.azureColor,
  AppColors.sapphireColor,
  ],
  begin: FractionalOffset(0.0, 0.0),
  end: FractionalOffset(1.0, 0.0),
  stops: [
  0.1,
  0.4,
  0.6,
  1.0,
  ],
  tileMode: TileMode.clamp,
  ),
  borderRadius: BorderRadius.circular(
  2.0,
  ),
  ),
  labelColor: AppColors.whiteColor,
  unselectedLabelColor: AppColors.blackColor,
  tabs: [
  Tab(
  text: widget.firstTabTxt,
  ),
  Tab(
  text: widget.secondTabTxt,
  ),
  ],
  ),
  ),
  Expanded(
  child: TabBarView(
  controller: _tabController,
  children: [
  Padding(
  padding: EdgeInsets.only(top: 10),
  child: Column(
  children: [
  Text(
  widget.firstTabViewTxt,
  ),
  ],
  ),
  ),
  Padding(
  padding: EdgeInsets.only(top: 10),
  child: Column(
  children: [
  Text(
  widget.secondTabViewTxt,
  ),
  ],
  ),
  ),
  ],
  ),
  ),
  ],
  ),
  );
  }
  }

and use it like a below :

TabBarWidget(
firstTabTxt: "Tab1",
firstTabViewTxt: "Tab1 View",
secondTabTxt: "Tab1",
secondTabViewTxt: "Tab2 View",
),

赞(0）回复(0）举报 2023-09-28

smdnsysy4#

您可以将TabBar和TabbarView放在Column中，只要TabBarView包含在Expanded小部件中即可。

return DefaultTabController(
  length: 2,
  child: Column(
    children: [
      TabBar(...),
      Expanded(
        child: TabBarView(...),
            ),
          ],
        ),
      );

赞(0）回复(0）举报 2023-09-28

我来回答

dart 没有脚手架的DefaultTabController？

4条答案

相关问题

热门标签

最新问答