As shown in the figure, a page and TabBar are upper and lower

CodePudding user response：

Use something like this:

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(debugShowCheckedModeBanner: false, home: AABeautyTabBar()));
}

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

  @override
  State<AABeautyTabBar> createState() => _AABeautyTabBarState();
}

class _AABeautyTabBarState extends State<AABeautyTabBar> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 10,
        child: Stack(
          children: [
            SizedBox.expand(
              child: TabBarView(
                children: [
                  for (int i = 1; i <= 10; i  )
                    Container(
                      decoration: BoxDecoration(
                          gradient: LinearGradient(
                              colors: i % 2 == 0
                                  ? [Colors.deepPurple[900]!, Colors.indigo]
                                  : [Colors.blue[900]!, Colors.teal[900]!])),
                      child: ListView.builder(
                          padding: const EdgeInsets.only(top: kTextTabBarHeight),
                          itemBuilder: (c, i) => Card(
                              color: Colors.white.withOpacity(.3),
                              child: Padding(
                                  padding: const EdgeInsets.all(16),
                                  child: Center(
                                      child: Text(
                                    "Item ${i   1}",
                                    style: const TextStyle(color: Colors.white, fontSize: 24),
                                  ))))),
                    ),
                ],
              ),
            ),
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: ClipRect(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
                  child: TabBar(
                    isScrollable: true,
                    labelColor: Colors.white,
                    labelStyle: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                    indicatorSize: TabBarIndicatorSize.label,
                    indicator: const UnderlineTabIndicator(
                        borderSide: BorderSide(width: 4, color: Colors.blue),
                        insets: EdgeInsets.symmetric(horizontal: 16.0)),
                    unselectedLabelColor: Colors.white.withOpacity(.5),
                    unselectedLabelStyle: const TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.normal,
                    ),
                    tabs: [for (int i = 1; i <= 10; i  ) Tab(text: "Page $i")],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

And the result: