luojigou_thinking_core/example/lib/demo/demo1.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:luojigou_thinking_core/luojigou_thinking_core.dart';

class Demo1 extends StatefulWidget {
  const Demo1({
    Key? key,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => _Demo1State();
}

class _Demo1State extends State<Demo1> with SingleTickerProviderStateMixin {
  late TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TabController(length: 5, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(
          width: 55,
          height: double.infinity,
          child: ColoredBox(
            color: Color(0xFFC8DDFF),
            child: Column(
              children: [
                SizedBox(
                  width: double.infinity,
                  height: 44 + MediaQuery.of(context).padding.top,
                  child: const ColoredBox(
                    color: Colors.teal,
                  ),
                ),
                Expanded(
                  child: VerticalTabBar(
                    controller: _controller,
                    isScrollable: true,
                    labelStyle: const TextStyle(
                      color: Color(0xFF75AAFF),
                      fontSize: 16,
                      height: 1,
                    ),
                    unselectedLabelStyle: const TextStyle(
                      color: Color(0xFFFFFFFF),
                      fontSize: 16,
                      height: 1,
                    ),
                    labelColor: const Color(0xFF75AAFF),
                    unselectedLabelColor: Colors.white,
                    indicator: _TabDecoration(),
                    tabs: [
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 4),
                        height: double.infinity,
                        color: Colors.transparent,
                        child: Center(child: const Text('综合区')),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 4),
                        height: double.infinity,
                        color: Colors.transparent,
                        child: Center(child: const Text('中华文化')),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 4),
                        height: double.infinity,
                        color: Colors.transparent,
                        child: Center(child: const Text('科学探索')),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 4),
                        height: double.infinity,
                        color: Colors.transparent,
                        child: Center(child: const Text('自由探索')),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 4),
                        height: double.infinity,
                        color: Colors.transparent,
                        child: Center(child: const Text('思维探索')),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
        Expanded(
          child: GestureDetector(
            onTap: () {
              int lastIndex = _controller.index;
              int nextIndex = (lastIndex + 1) % _controller.length;
              _controller.animateTo(nextIndex);
            },
            child: ColoredBox(
              color: Colors.transparent,
              child: SizedBox.expand(),
            ),
          ),
        ),
      ],
    );
  }
}

class _TabDecoration extends Decoration {
  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _BoxPainter(onChanged);
  }
}

class _BoxPainter extends BoxPainter {
  _BoxPainter(VoidCallback? onChanged) : super(onChanged);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    if (configuration.size == null) return;

    final size = configuration.size!;
    final paint = Paint()..color = const Color(0xFF75AAFF);

    final dotx = offset.dx + size.width / 2;
    final doty = offset.dy + size.height - 8;
    canvas.drawCircle(Offset(dotx, doty), 2, paint);

    double h = 18.8;
    double w = 60;

    final path = Path();
    path.moveTo(dotx - w, doty + 8);
    path.lineTo(dotx, doty + 8 + 20);
    path.lineTo(dotx + w, doty + 8);

    path.reset();
    path.moveTo(dotx - w, doty + 8);
    path.cubicTo(dotx - w/2-10, doty+8, dotx-w/2+10, doty + 8 + h, dotx, doty + 8 + h);
    path.cubicTo(dotx + w/2-10, doty+8+h, dotx+w/2+10, doty + 8 , dotx + w, doty + 8);
    canvas.drawPath(path, paint..color = const Color(0xFFC8DDFF));
  }
}