Flutter UI增强与适配插件suitup的使用方法

Flutter UI增强与适配插件suitup的使用方法详解

示例代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:suitup/suitup.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: SuitupObsExample(),
        ),
      ),
    );
  }
}

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

  @override
  State<SuitupObsExample> createState() => _SuitupObsExampleState();
}

class _SuitupObsExampleState extends State<SuitupObsExample> {
  final myName = SuitupNotifier<String?>(null);

  @override
  void initState() {
    super.initState();

    // 渲染 `loading` 状态
    Future.delayed(const Duration(seconds: 3), () => myName.setLoading());

    // 渲染 `data` 状态
    Future.delayed(const Duration(seconds: 6), () => myName.value = 'Marco Braghim');

    // 渲染 `error` 状态
    Future.delayed(const Duration(seconds: 9), () => myName.setError('The moon is not cool today'));
  }

  @override
  Widget build(BuildContext context) {
    return SuitupNotifierBuilder(
      observable: myName,
      init: (data) => const Text('Initializing...'),
      onLoading: const CupertinoActivityIndicator(),
      onData: (value) => Text('My name is: $value'),
      onError: (reason) => Text('Something went wrong: $reason'),
    );
  }
}

// 控制器
class SuitupObsExampleController extends SuitupController {
  final myName = ValueNotifier<String?>(null);

  /// 自动调用 `initState`
  @override
  Future<void> initialize() async {
    super.initialize();

    // 设置加载状态
    setStatus(SuitupStatus.loading);

    Future.delayed(const Duration(seconds: 3), () {
      myName.value = 'Marco Braghim';
      setStatus(SuitupStatus.finished);
    });
  }

  /// 自动调用 `dispose`
  @override
  dispose() {
    super.dispose();

    myName.dispose();
  }
}

// 使用 `SuitupState`
class SuitupObsExamplePage extends StatefulWidget {
  const SuitupObsExamplePage({super.key});

  @override
  State<SuitupObsExamplePage> createState() => _SuitupObsExamplePageState();
}

class _SuitupObsExamplePageState extends SuitupState<SuitupObsExampleController, SuitupObsExamplePage> {
  // 使用 `controller` 访问 `SuitupObsExampleController` 实例

  @override
  Widget build(BuildContext context) {
    return SuitupObserver(
      observables: [
        controller.myName,
        controller.status,
      ],
      builder: (context) {
        if (controller.status.value.isLoading) {
          return const CupertinoActivityIndicator();
        }

        return Text(controller.myName.value!);
      },
    );
  }
}

代码解释

1. 引入依赖：

   import 'package:get_it/get_it.dart';
   import 'package:suitup/suitup.dart';
   

2. 初始化应用：

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

3. 应用主题：

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         theme: ThemeData.dark().copyWith(
           scaffoldBackgroundColor: darkBlue,
         ),
         debugShowCheckedModeBanner: false,
         home: const Scaffold(
           body: Center(
             child: SuitupObsExample(),
           ),
         ),
       );
     }
   }
   

4. 使用 SuitupNotifier 和 SuitupNotifierBuilder：

   class SuitupObsExample extends StatefulWidget {
     const SuitupObsExample({super.key});
   
     @override
     State<SuitupObsExample> createState() => _SuitupObsExampleState();
   }
   
   class _SuitupObsExampleState extends State<SuitupObsExample> {
     final myName = SuitupNotifier<String?>(null);
   
     @override
     void initState() {
       super.initState();
   
       Future.delayed(const Duration(seconds: 3), () => myName.setLoading());
       Future.delayed(const Duration(seconds: 6), () => myName.value = 'Marco Braghim');
       Future.delayed(const Duration(seconds: 9), () => myName.setError('The moon is not cool today'));
     }
   
     @override
     Widget build(BuildContext context) {
       return SuitupNotifierBuilder(
         observable: myName,
         init: (data) => const Text('Initializing...'),
         onLoading: const CupertinoActivityIndicator(),
         onData: (value) => Text('My name is: $value'),
         onError: (reason) => Text('Something went wrong: $reason'),
       );
     }
   }
   

5. 使用 SuitupController：

   class SuitupObsExampleController extends SuitupController {
     final myName = ValueNotifier<String?>(null);
   
     @override
     Future<void> initialize() async {
       super.initialize();
   
       setStatus(SuitupStatus.loading);
   
       Future.delayed(const Duration(seconds: 3), () {
         myName.value = 'Marco Braghim';
         setStatus(SuitupStatus.finished);
       });
     }
   
     @override
     dispose() {
       super.dispose();
   
       myName.dispose();
     }
   }
   

6. 使用 SuitupState：

   class SuitupObsExamplePage extends StatefulWidget {
     const SuitupObsExamplePage({super.key});
   
     @override
     State<SuitupObsExamplePage> createState() => _SuitupObsExamplePageState();
   }
   
   class _SuitupObsExamplePageState extends SuitupState<SuitupObsExampleController, SuitupObsExamplePage> {
     @override
     Widget build(BuildContext context) {
       return SuitupObserver(
         observables: [
           controller.myName,
           controller.status,
         ],
         builder: (context) {
           if (controller.status.value.isLoading) {
             return const CupertinoActivityIndicator();
           }
   
           return Text(controller.myName.value!);
         },
       );
     }
   }