Flutter广告横幅展示插件banners的使用

在Flutter应用程序中，有时我们希望能够在屏幕顶部动态地显示一些横幅信息。banners插件提供了这种功能。

如何使用

创建横幅

首先，创建一些横幅Widget。可以使用BannerScaffold来自动设置颜色并尊重状态栏的填充。

/// 表示用户正在使用演示帐户。
class DemoBanner extends StatelessWidget {
  Key get key => ValueKey('demo');

  @override
  Widget build(BuildContext context) {
    return BannerScaffold(
      backgroundColor: Colors.yellow,
      body: Padding(
        padding: EdgeInsets.all(8),
        child: Text('这是一个演示帐户。'),
      ),
    );
  }
}

使用横幅

将一个widget用Bannered包裹起来，并提供横幅widgets。MediaQuery的padding将会被正确调整。

return Bannered(
  banners: [
    // 一些横幅widgets。
  ],
  child: Scaffold(...),
);

完整示例Demo

下面是一个完整的示例，展示了如何在Flutter应用中使用banners插件：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext _) => MaterialApp(home: ThePage());
}

class ThePage extends StatefulWidget {
  @override
  State<ThePage> createState() => _ThePageState();
}

class _ThePageState extends State<ThePage> {
  final _banners = <Widget>[];

  @override
  Widget build(BuildContext context) {
    return Bannered(
      banners: _banners,
      child: Scaffold(
        appBar: AppBar(title: Text('首页')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => setState(() => _banners.add(DemoBanner())),
                child: Text('以演示身份登录'),
              ),
              ElevatedButton(
                onPressed: () => setState(() => _banners.removeWhere((element) => element.key == ValueKey('demo'))),
                child: Text('退出演示登录'),
              ),
              ElevatedButton(
                onPressed: () => setState(() => _banners.add(OfflineBanner())),
                child: Text('离线'),
              ),
              ElevatedButton(
                onPressed: () => setState(() => _banners.removeWhere((element) => element.key == ValueKey('offline'))),
                child: Text('在线'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 演示横幅
class DemoBanner extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BannerScaffold(
      backgroundColor: Colors.yellow,
      body: Padding(
        padding: EdgeInsets.all(8.0),
        child: Text('这是演示模式'),
      ),
    );
  }
}

// 离线横幅
class OfflineBanner extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BannerScaffold(
      backgroundColor: Colors.redAccent,
      body: Padding(
        padding: EdgeInsets.all(8.0),
        child: Text('当前处于离线状态'),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含四个按钮，用于添加或移除不同的横幅。通过点击这些按钮，可以在屏幕顶部显示或隐藏相应的横幅。