smart_tab_layout 1.0.7

This is a library based on Flutter TabBar functionality extensions

example/lib/main.dart

import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:smart_tab_layout/smart_tab_layout.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: Locale("zh_CN"),
      title: 'SmartTabLayout Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TestPage(),
    );
  }
}

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> with TickerProviderStateMixin {
  TabController? tabController;
  TabController? tabController1;
  DrawableRoot? svgRoot;

  @override
  void initState() {
    super.initState();
    tabController = TabController(initialIndex: 7, length: 10, vsync: this);
    tabController1 = TabController(initialIndex: 7, length: 15, vsync: this);

    SmartImageTabIndicator.load("assets/img/ic_search.png", Size(20, 20))
        .then((value) {
      _image = value;
      setState(() {});
    });
    loadSvg();
  }

  loadSvg() async {
    final String rawSvg = 'assets/img/ic_airplane.svg';
    ByteData data = await rootBundle.load(rawSvg);

    svgRoot = await svg.fromSvgBytes(data.buffer.asUint8List(), rawSvg);
    // final Picture? picture = svgRoot?.toPicture();
    // _image = await picture?.toImage(20,20);
  }

  ui.Image? _image;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: SafeArea(
          child: _testList(),
        ),
      ),
    );
  }

  _testList() {
    return Column(
      children: [
        _tabStyle1(),
        SizedBox(height: 30),
        _tabStyle2(),
        SizedBox(height: 30),
        _tabStyle3(),
        SizedBox(height: 30),
        _tabBar(),
        SizedBox(height: 30),
        Row(
          children: [
            DefaultTabController(length: 10, child: _tabStyle4()),
            SizedBox(width: 30),
            DefaultTabController(length: 15, child: _tabStyle5()),
          ],
        ),
      ],
    );
  }

  _tabStyle1() {
    return DefaultTabController(
      length: 10,
      child: SmartTabLayout(
        height: 80,
        itemTextStyle:
            TextStyle(fontWeight: FontWeight.normal, color: Colors.black),
        itemSelectedTextStyle:
            TextStyle(fontWeight: FontWeight.w500, color: Colors.black),
        indicator: SmartImageTabIndicator(
          // image: _image
          customDraw: (canvas, offset, configuration, rect) async {
            // If you only want the final Picture output, just use

            // Otherwise, if you want to draw it to a canvas:
            // Optional, but probably normally desirable: scale the canvas dimensions to
            // the SVG's viewbox
            canvas.translate(rect.topCenter.dx - 10, rect.topCenter.dy);
            svgRoot?.scaleCanvasToViewBox(canvas, Size(20, 20));

            // Optional, but probably normally desireable: ensure the SVG isn't rendered
            // outside of the viewbox bounds
            svgRoot?.clipCanvasToViewBox(canvas);
            // The second parameter is not used
            svgRoot?.draw(canvas, Rect.zero);
          },
        ),
        labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
      ),
    );
  }

  _tabStyle2() {
    return DefaultTabController(
      length: 10,
      child: SmartTabLayout(
        labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
        width: 400,
        height: 80,
        space: 20,
        spaceBuilder: (c, index) => Container(color: Colors.amber, width: 20),
        background: Colors.lightBlue,
        margin: EdgeInsets.only(left: 10, right: 10),
        padding: EdgeInsets.only(left: 10, right: 10),
        borderRadius: BorderRadius.circular(6),
        border: Border.all(color: Colors.black, width: 1),
        itemWidth: 60,
        itemHeight: 30,
        itemBackground: Colors.indigoAccent,
        itemBorderRadius: BorderRadius.circular(8),
        itemPadding: EdgeInsets.symmetric(horizontal: 6, vertical: 3),
        itemBorder: Border.all(color: Colors.black, width: 1),
        isScrollable: true,
        direction: Axis.horizontal,
        itemSelectedBackground: Colors.white,
        itemSelectedBorder: Border.all(color: Colors.orange, width: 1),
        itemSelectedBorderRadius: BorderRadius.zero,
        // itemSelectedHeight: 40,
        // itemSelectedWidth: 80,
        itemSelectedPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 1),
        itemTextStyle: TextStyle(
          color: Colors.purple,
          fontSize: 16,
          fontWeight: FontWeight.normal,
        ),
        itemSelectedTextStyle: TextStyle(
          color: Colors.orange,
          fontSize: 20,
          fontWeight: FontWeight.normal,
        ),
        childCount: 10,
        indicatorColor: Colors.redAccent,
      ),
    );
  }

  _tabStyle3() {
    return DefaultTabController(
      length: 15,
      child: SmartTabLayout(
        controller: tabController1,
        background: Colors.orangeAccent,
        indicatorSize: TabBarIndicatorSize.label,
        indicatorBorderRadius: BorderRadius.circular(4),
        padding: EdgeInsets.symmetric(horizontal: 10),
        width: 400,
        height: 80,
        space: 20,
        itemWidth: 40,
        itemTextStyle: TextStyle(
          color: Colors.black,
        ),
        itemSelectedTextStyle: TextStyle(
          color: Colors.redAccent,
        ),
        itemHeight: 30,
        isScrollable: true,
        // indicatorPadding: EdgeInsets.only(bottom: 20),
        childCount: 15,
        itemBuilder: (c, i) {
          return Container(
            alignment: Alignment.center,
            color: Colors.grey,
            child: Text(i.toString() + (i == 0 ? "23123" : "")),
          );
        },
        onTap: (index) {
          tabController?.index = index;
        },
      ),
    );
  }

  _tabBar() {
    return DefaultTabController(
      length: 10,
      child: TabBar(
          controller: tabController,
          isScrollable: true,
          labelColor: Colors.black,
          unselectedLabelColor: Colors.redAccent,
          onTap: (index) {
            tabController?.index = index;
          },
          indicatorSize: TabBarIndicatorSize.label,
          tabs: [
            Container(
              child: Text("113"),
            ),
            Text("22"),
            Text("33"),
            Text("44"),
            Text("55"),
            Text("66"),
            Text("77"),
            Text("88"),
            Text("99"),
            Text("101"),
          ]),
    );
  }

  _tabStyle4() {
    return SmartTabLayout(
      width: 80,
      height: 400,
      space: 20,
      background: Colors.lightBlue,
      margin: EdgeInsets.only(left: 10),
      padding: EdgeInsets.all(10),
      borderRadius: BorderRadius.circular(6),
      border: Border.all(color: Colors.black, width: 1),
      itemWidth: 60,
      itemHeight: 30,
      itemBackground: Colors.indigoAccent,
      itemBorderRadius: BorderRadius.circular(8),
      itemPadding: EdgeInsets.symmetric(horizontal: 6, vertical: 3),
      itemBorder: Border.all(color: Colors.black, width: 1),
      isScrollable: true,
      direction: Axis.vertical,
      itemSelectedBackground: Colors.white,
      itemSelectedBorder: Border.all(color: Colors.orange, width: 1),
      itemSelectedBorderRadius: BorderRadius.zero,
      // itemSelectedHeight: 40,
      // itemSelectedWidth: 80,
      itemSelectedPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 1),
      itemTextStyle: TextStyle(
        color: Colors.purple,
        fontSize: 16,
        fontWeight: FontWeight.normal,
      ),
      itemSelectedTextStyle: TextStyle(
        color: Colors.orange,
        fontSize: 16,
        fontWeight: FontWeight.normal,
      ),
      childCount: 10,
      itemTransition: true,
      itemBuilder: (c, i) {
        return Container(
          alignment: Alignment.center,
          child: Text(i.toString()),
        );
      },
      indicatorWeight: 0,
    );
  }

  _tabStyle5() {
    return SmartTabLayout(
      labels: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15"
      ],
      controller: tabController1,
      indicatorSize: TabBarIndicatorSize.tab,
      width: 80,
      height: 400,
      space: 20,
      background: Colors.orangeAccent,
      padding: EdgeInsets.symmetric(vertical: 10),
      itemWidth: 40,
      itemTextStyle: TextStyle(
        color: Colors.black,
      ),
      itemSelectedTextStyle: TextStyle(
        color: Colors.redAccent,
      ),
      direction: Axis.vertical,
      indicatorWidth: 30,
      indicatorWeight: 5,
      indicatorBorderRadius: BorderRadius.horizontal(left: Radius.circular(4)),
      isScrollable: true,
      itemBuilder: (c, i) {
        return Container(
          height: i == 6 ? 80 : 30,
          alignment: Alignment.center,
          child: Text(i.toString()),
        );
      },
    );
  }
}