Блог

Ниже приведена пользовательская вкладка, которую я создал:

 class Tabs extends StatefulWidget {
  final tabs;
  final views;

  Tabs({this.tabs, this.views});

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: widget.tabs.length, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return SingleChildScrollView(
      physics: BouncingScrollPhysics(),
      child: Container(
        height: size.height,
        child: Column(
          children: [
            Container(
              height: 45,
              decoration: BoxDecoration(
                border: Border(
                  bottom:
                      BorderSide(color: Colors.grey, width: 3),
                ),
              ),
              child: TabBar(
                isScrollable: true,
                controller: _tabController,
                indicatorPadding: EdgeInsets.only(bottom: -2.5),
                indicator: UnderlineTabIndicator(
                  borderSide: BorderSide(
                    width: 4,
                    color: Colors.blue,
                  ),
                ),
                labelColor: Colors.blue,
                unselectedLabelColor: Colors.black,
                tabs: [
                  ...widget.tabs.map(
                    (e) => Tab(
                      child: Container(
                        child: Text(
                          e,
                          style: GoogleFonts.inter(
                            fontSize: 14,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: [...widget.views],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

Но как только я использую его на экране своего приложения, у меня возникают проблемы с переполнением:

 
class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: "Home"
        elevation: 0,
        toolbarHeight: 36,
      ),
      drawer: DrawerNavigation(),
      body: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        child: Column(
          children: [
            SizedBox(
              height: 100,
            ),
            Tabs(
              tabs: ['tab1', 'tab2'],
              views: [
                Tab1(),
                Tab2(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

Ошибка, которую я получаю, связана с одним дочерним видом прокрутки.

Я попытался удалить один дочерний вид прокрутки с вкладок, но тогда пользовательские вкладки не будут работать.

просто удалите один дочерний вид прокрутки с пользовательской вкладки, как это,

 import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class Tabs extends StatefulWidget {
  final tabs;
  final views;

  Tabs({this.tabs, this.views});

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: widget.tabs.length, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Container(
      height: size.height,
      child: Column(
        children: [
          Container(
            height: 45,
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(color: Colors.grey, width: 3),
              ),
            ),
            child: TabBar(
              isScrollable: true,
              controller: _tabController,
              indicatorPadding: EdgeInsets.only(bottom: -2.5),
              indicator: UnderlineTabIndicator(
                borderSide: BorderSide(
                  width: 4,
                  color: Colors.blue,
                ),
              ),
              labelColor: Colors.blue,
              unselectedLabelColor: Colors.black,
              tabs: [
                ...widget.tabs.map(
                  (e) => Tab(
                    child: Container(
                      child: Text(
                        e,
                        style: GoogleFonts.inter(
                          fontSize: 14,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: [...widget.views],
            ),
          ),
        ],
      ),
    );
  }
}
 

и преобразуйте виджет без состояния (Home) в виджет с сохранением состояния, и он будет работать нормально, как это,

 class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 100,
            ),
            Tabs(
              tabs: ["tab1", "tab2"],
              views: [okay(), okay()],
            )
          ],
        ),
      ),
    );
  }
}