Flutter下拉应用栏插件pull_appbar的使用

Flutter下拉应用栏插件pull_appbar的使用

概述

PullAppBar 是一个 Flutter 包，它通过允许用户通过拉动应用栏来动态更改页面内容，从而增强应用程序导航。它提供了平滑且交互式的用户体验，并支持自定义标题和页面。

实时演示

您可以在此处查看实时演示：实时演示

特性

• 通过拉动应用栏更改页面内容。
• 平滑过渡和动画效果。

安装

在您的 pubspec.yaml 文件中添加 pull_appbar 依赖项，并导入该包：

import 'package:pull_appbar/pull_appbar.dart';

使用

创建一个 PullAppBar 小部件，并传递所需的参数：

PullAppBar(
  titles: const [
    Text('Title1'),
    Text('Title2'),
    Text('Title3'),
    Text('Title4'),
  ],
  onPageChanged: (value) => print(value),
  children: const [
    Center(child: Text('Page1')),
    Center(child: Text('Page2')),
    Center(child: Text('Page3')),
    Center(child: Text('Page4')),
  ],
)

完整示例

以下是一个完整的示例代码，展示了如何使用 PullAppBar：

import 'package:flutter/material.dart';
import 'package:pull_appbar/pull_appbar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List gradients = [
    const LinearGradient(
      colors: [Color(0xffbde5d0), Color(0xff123c6c)],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
    const LinearGradient(
      colors: [Color(0xff97c794), Color(0xff12656c)],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
    // 其他渐变颜色...
  ];

  late final remainingSize = MediaQuery.of(context).size.height - 80;
  final titleNames = [
    'Latest Movies',
    'Best Movies',
    'Archive',
    'About',
  ];

  late final List<Widget> _titles = [
    for (int i = 0; i < 4; i++)
      Text(
        titleNames[i],
        style: const TextStyle(color: Colors.white),
      ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: PullAppBar(
        titles: _titles,
        children: [
          ListView(
            padding: EdgeInsets.zero,
            children: [
              SizedBox(
                height: remainingSize,
                child: Column(
                  children: [
                    Expanded(child: ListItem(gradient: gradients[0], title: 'INTERSTELLAR')),
                    Expanded(
                        child: Row(
                      children: [
                        Expanded(
                          child: Column(
                            children: [
                              Expanded(child: ListItem(gradient: gradients[1], title: 'THE GODFATHER')),
                              Expanded(child: ListItem(gradient: gradients[2], title: 'THE DARK KNIGHT')),
                            ],
                          ),
                        ),
                        Expanded(child: ListItem(gradient: gradients[3], title: 'THE LORD\nOF THE\nRINGS')),
                      ],
                    )),
                  ],
                ),
              ),
              SizedBox(
                height: remainingSize / 2,
                child: Column(
                  children: [
                    Expanded(
                      child: Row(
                        children: [
                          Expanded(child: ListItem(gradient: gradients[4], title: 'INCEPTION')),
                          Expanded(child: ListItem(gradient: gradients[5], title: 'FIGHT CLUB')),
                        ],
                      ),
                    ),
                    Expanded(child: ListItem(gradient: gradients[6], title: 'PULP FICTION')),
                  ],
                ),
              ),
            ],
          ),
          ListView(
            padding: EdgeInsets.zero,
            children: [
              SizedBox(
                height: remainingSize / 4,
                child: ListItem(gradient: gradients[0], title: 'OPPENHEIMER'),
              ),
              SizedBox(
                height: remainingSize / 4,
                child: ListItem(gradient: gradients[1], title: 'SPIDER-MAN: ACROSS THE SPIDER-VERSE'),
              ),
              SizedBox(
                height: remainingSize / 4,
                child: ListItem(gradient: gradients[2], title: 'JOHN WICK: CHAPTER 4'),
              ),
              SizedBox(
                height: remainingSize / 4,
                child: ListItem(gradient: gradients[3], title: 'DUNE: PART TWO'),
              ),
              SizedBox(
                height: remainingSize / 4,
                child: ListItem(gradient: gradients[4], title: 'FURIOSA: A MAD MAX SAGA'),
              ),
              SizedBox(
                height: remainingSize / 4,
                child: ListItem(gradient: gradients[5], title: 'WONKA'),
              ),
            ],
          ),
          ListView(
            padding: EdgeInsets.zero,
            children: [
              SizedBox(
                height: remainingSize / 6,
                child: ListItem(gradient: gradients[0], title: 'CASABLANCA'),
              ),
              SizedBox(
                height: remainingSize / 6,
                child: ListItem(gradient: gradients[1], title: 'GONE WITH THE WIND'),
              ),
              SizedBox(
                height: remainingSize / 6,
                child: ListItem(gradient: gradients[2], title: 'CITIZEN KANE'),
              ),
              SizedBox(
                height: remainingSize / 6,
                child: ListItem(gradient: gradients[3], title: 'THE WIZARD OF OZ'),
              ),
              SizedBox(
                height: remainingSize / 6,
                child: ListItem(gradient: gradients[4], title: 'IT\'S A WONDERFUL LIFE'),
              ),
              SizedBox(
                height: remainingSize / 6,
                child: ListItem(gradient: gradients[5], title: 'PSYCHO '),
              ),
              SizedBox(
                height: remainingSize / 6,
                child: ListItem(gradient: gradients[6], title: 'LAWRENCE OF ARABIA'),
              ),
              SizedBox(
                height: remainingSize / 6,
                child: ListItem(gradient: gradients[7], title: 'SUNSET BOULEVARD'),
              ),
            ],
          ),
          Container(
            height: remainingSize,
            decoration: BoxDecoration(
              gradient: gradients[1],
            ),
            child: const Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    'MENU\nINTERACTION\nCONCEPT',
                    textAlign: TextAlign.left,
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
                  ),
                  Text(
                    'By Hamid reza Shakeri',
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class ListItem extends StatelessWidget {
  final String title;
  final LinearGradient gradient;
  const ListItem({
    super.key,
    required this.title,
    required this.gradient,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: gradient,
      ),
      child: Align(
        alignment: Alignment.bottomLeft,
        child: Padding(
          padding: const EdgeInsets.only(bottom: 16, left: 24),
          child: Text(
            title,
            style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
          ),
        ),
      ),
    );
  }
}