Как изменить стиль TabBar в Flutter?

Вы можете настроить подчёркивание TabBar в Flutter и переместить его наверх, используя комбинацию кастомного индикатора для TabBar и установки позиции индикатора. Вот пример того, как ты можешь создать изогнутую линию подчеркивания и переместить её наверх:

1. Создайте пользовательский индикатор для TabBar:
   Ты можешь создать пользовательский Decoration для индикатора, переопределив метод paint. Это позволяет контролировать форму и позицию подчеркивания.
2. Используйте пользовательский индикатор в виджете TabBar:
   Вот пример кода, который демонстрирует изогнутую линию подчеркивания и перемещает её наверх вкладок:

   import 'package:flutter/material.dart';
   
   class CurvedTabIndicator extends Decoration {
     @override
     BoxPainter createBoxPainter([VoidCallback? onChanged]) {
       return _CurvedPainter(this, onChanged);
     }
   }
   
   class _CurvedPainter extends BoxPainter {
     final CurvedTabIndicator decoration;
   
     _CurvedPainter(this.decoration, VoidCallback? onChanged)
         : super(onChanged);
   
     @override
     void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
       final paint = Paint()
         ..color = Colors.blue
         ..style = PaintingStyle.stroke
         ..strokeWidth = 4;
   
       final double xStart = offset.dx;
       final double xEnd = xStart + configuration.size!.width;
       final double y = offset.dy + 4; // Настрой y, чтобы переместить линию наверх
   
       final path = Path()
         ..moveTo(xStart, y)
         ..quadraticBezierTo(
             (xStart + xEnd) / 2, y - 8, xEnd, y); // Создаёт кривую
   
       canvas.drawPath(path, paint);
     }
   }
   
   class MyTabBarApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: DefaultTabController(
           length: 3,
           child: Scaffold(
             appBar: AppBar(
               title: Text('Изогнутое подчеркивание TabBar'),
               bottom: TabBar(
                 tabs: [
                   Tab(text: "Вкладка 1"),
                   Tab(text: "Вкладка 2"),
                   Tab(text: "Вкладка 3"),
                 ],
                 indicator: CurvedTabIndicator(), // Пользовательский индикатор
                 indicatorSize: TabBarIndicatorSize.tab,
                 labelColor: Colors.black,
                 unselectedLabelColor: Colors.grey,
               ),
             ),
             body: TabBarView(
               children: [
                 Center(child: Text("Содержимое Вкладки 1")),
                 Center(child: Text("Содержимое Вкладки 2")),
                 Center(child: Text("Содержимое Вкладки 3")),
               ],
             ),
           ),
         ),
       );
     }
   }
   
   void main() {
     runApp(MyTabBarApp());
   }
   

Основные моменты:

• Класс CurvedTabIndicator создаёт изогнутую линию подчеркивания.
• Класс _CurvedPainter рисует пользовательскую форму, используя Path и Paint.
• Линия подчеркивания перемещается наверх за счёт изменения координаты y в методе paint.