Flutter UI组件库插件antinna_ui_kit的使用

antinna_ui_kit 是一个为 Flutter 提供一组用户界面组件的包，其中包括一个连接状态横幅（Connectivity Banner），用于通知用户网络状态的变化。

特性

• ConnectivityBannerHost: 当网络连接丢失时，显示一个横幅的部件。

开始使用

要使用 ConnectivityBannerHost 组件，你需要在你的 Dart 代码中添加以下导入语句：

import 'package:antinna_ui_kit/antinna_ui_kit.dart';

示例代码

以下是一个完整的示例代码，展示了如何使用 ConnectivityBannerHost 组件。

import 'package:flutter/material.dart';
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:antinna_ui_kit/antinna_ui_kit.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isConnected = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ConnectionMonitor(
          child: ConnectivityBannerHost(
            isConnected: isConnected,
            banner: const Material(
              color: Colors.red,
              child: Padding(
                padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 12.0),
                child: Text(
                  'No Internet Connection',
                  style: TextStyle(color: Colors.white),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            child: Center(
              child: ElevatedButton(
                onPressed: () {
                  setState(() {
                    isConnected = !isConnected;
                  });
                },
                child: Text(isConnected ? 'Disconnect' : 'Connect'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

@immutable
class ConnectionMonitor extends StatefulWidget {
  const ConnectionMonitor({
    super.key,
    required this.child,
  });

  final Widget child;

  @override
  State<ConnectionMonitor> createState() => _ConnectionMonitorState();
}

class _ConnectionMonitorState extends State<ConnectionMonitor> {
  late final _connectivity = _connectivityStream();

  Stream<ConnectivityResult> _connectivityStream() async* {
    final connectivity = Connectivity();
    final result = await connectivity.checkConnectivity();
    yield result.first;
    yield* connectivity.onConnectivityChanged
        .expand((results) => results); // Flatten the stream
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _connectivity,
      builder: (BuildContext context, AsyncSnapshot<ConnectivityResult> snapshot) {
        if (snapshot.connectionState != ConnectionState.active) {
          return widget.child;
        }
        final result = snapshot.requireData;
        return ConnectivityBannerHost(
          isConnected: result != ConnectivityResult.none,
          banner: const Material(
            color: Colors.red,
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 12.0),
              child: Text(
                'Please check your internet connection',
                style: TextStyle(color: Colors.white),
                textAlign: TextAlign.center,
              ),
            ),
          ),
          child: widget.child,
        );
      },
    );
  }
}

安装

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  antinna_ui_kit: ^1.0.0