使用SliverAppBar轻松实现视图酷炫效果

话不多说，懂得自懂上代码

import 'package:flutter/material.dart';

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

  @override
  State<SliverDemo> createState() => _SliverDemoState();
}

class _SliverDemoState extends State<SliverDemo>
    with SingleTickerProviderStateMixin {
  TabController? myTabController;

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

  @override
  Widget build(BuildContext context) {
    buildSpace() {
      return const Image(
        image: NetworkImage(
            "https://img0.baidu.com/it/u=1797555725,1345025723&fm=253&fmt=auto&app=138&f=JPEG"),
        fit: BoxFit.fill,
      );
    }

    return Scaffold(
        body: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return [
                SliverAppBar(
                  expandedHeight: 200,
                  pinned: true,
                  flexibleSpace: buildSpace(),
                  title: const Text("demo"),
                  floating: true,
                  leading: const Icon(Icons.home),
                  actions: const [Icon(Icons.share)],
                  bottom: TabBar(
                    labelColor: Colors.lightGreen,
                    unselectedLabelColor: Colors.pink,
                    tabs: const [
                      Tab(text: "a"),
                      Tab(text: "b"),
                      Tab(text: "c"),
                      Tab(text: "d"),
                    ],
                    controller: myTabController,
                  ),
                )
              ];
            },
            body: TabBarView(
              controller: myTabController,
              children: const [
                Text("a"),
                Text("b"),
                Text("c"),
                Text("d"),
              ],
            )));
  }
}

效果图

修改代码

  buildSpace() {
      // return const Image(
      //   image: NetworkImage(
      //       "https://img0.baidu.com/it/u=1797555725,1345025723&fm=253&fmt=auto&app=138&f=JPEG"),
      //   fit: BoxFit.fill,
      // );
      return const FlexibleSpaceBar(
      centerTitle: true,
      titlePadding: EdgeInsets.zero,
        background: Image(
          // color: Colors.black,
          image: NetworkImage(
              "https://img0.baidu.com/it/u=1797555725,1345025723&fm=253&fmt=auto&app=138&f=JPEG"),
          fit: BoxFit.fill,

        ));
    }

效果