Flutter智能广告横幅插件smart_banner的使用

smart_banner 是一个用于在Flutter Web应用顶部显示智能广告横幅的插件。该插件灵感来源于 smart-app-banner 和 react-smartbanner。

您可以在线试用示例：在线示例

使用方法

要使用 smart_banner 插件，请将您的视图包裹在 SmartBannerScaffold 小部件中。如果您希望在应用程序顶部显示持久横幅，可能需要直接在 MaterialApp.builder 属性中使用它。

示例代码

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:smart_banner/smart_banner.dart';

class BannerModel extends ChangeNotifier {
  BannerPosition _position = BannerPosition.top;
  BannerPosition get position => _position;
  set position(BannerPosition value) {
    _position = value;
    notifyListeners();
  }

  BannerStyle _style = BannerStyle.ios;
  BannerStyle get style => _style;
  set style(BannerStyle value) {
    _style = value;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => BannerModel(),
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    final bannerModel = context.watch<BannerModel>();

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      builder: (context, child) {
        if (child != null) {
          final icon = Image.network(
            'https://upload.wikimedia.org/wikipedia/commons/c/cd/Facebook_logo_%28square%29.png',
          );

          return SmartBannerScaffold(
            isShown: true,
            style: bannerModel.style,
            position: bannerModel.position,
            properties: BannerProperties(
              title: 'Facebook',
              buttonLabel: 'VIEW',
              androidProperties: BannerPropertiesAndroid(
                packageName: 'com.facebook.katana',
                storeText: 'In Google Play',
                priceText: 'Free',
                icon: icon,
              ),
              iosProperties: BannerPropertiesIOS(
                appId: '284882215',
                storeText: 'On the App Store',
                priceText: 'Free',
                icon: icon,
              ),
            ),
            child: child,
          );
        }
        return const SizedBox.shrink();
      },
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final bannerModel = context.watch<BannerModel>();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () => SmartBannerScaffold.showBanner(context),
              child: const Text('Show Banner'),
            ),
            ElevatedButton(
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (_) => const MyHomePage(),
                ),
              ),
              child: const Text('Push Page'),
            ),
            DropdownButton<BannerPosition>(
              value: bannerModel.position,
              items: BannerPosition.values
                  .map((e) => DropdownMenuItem(value: e, child: Text(e.name)))
                  .toList(),
              onChanged: (position) {
                if (position != null) {
                  bannerModel.position = position;
                }
              },
            ),
            DropdownButton<BannerStyle>(
              value: bannerModel.style,
              items: BannerStyle.values
                  .map((e) => DropdownMenuItem(value: e, child: Text(e.name)))
                  .toList(),
              onChanged: (style) {
                if (style != null) {
                  bannerModel.style = style;
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

截图

更多完整示例请参见 example。

以上内容展示了如何在Flutter项目中集成和使用 `smart_banner` 插件，并提供了完整的示例代码以供参考。