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: 7, vsync: this);
  }

  bool _value = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFC8DDFF),
      body: ReverseRow(
        children: [
          PutAway(
            direction: PutAwayDirection.rtl,
            isPutAway: _value,
            child: SizedBox(
              width: 55,
              height: double.infinity,
              child: Column(
                children: [
                  SizedBox(
                    width: double.infinity,
                    height: 44 + MediaQuery.of(context).padding.top,
                    child: const Icon(Icons.arrow_back_ios),
                  ),
                  Expanded(
                    child: VerticalTabBar(
                      controller: _controller,
                      isScrollable: true,
                      padding: EdgeInsets.only(left: 40),
                      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('思维探索')),
                        ),

                        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: () {
                setState(() {
                  _value = !_value;
                });
              },
              child: Container(
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20),
                    bottomLeft: Radius.circular(20),
                  ),
                  boxShadow: [],
                ),
                child: Center(
                  child: Container(
                    height: 220,
                    width: 220,
                    color: Colors.red,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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));
  }
}