Flutter私活开发中的10个高频实用代码片段

以下精选Flutter私活开发中的10个高频实用代码片段，附带详细注释和优化技巧，助您快速提升开发效率：

---

1. 支付模块集成（支付宝+微信）

// 支付服务封装 - lib/services/payment_service.dart
import 'package:alipay_kit/alipay_kit.dart';
import 'package:fluwx/fluwx.dart' as fluwx;

class PaymentService {
  // 支付宝支付
  static Future<bool> alipay(String orderId, double amount) async {
    final result = await AlipayKit.pay(
      orderInfo: _generateAlipayInfo(orderId, amount),
      scheme: 'your.app.scheme' // iOS必须配置
    );
    return result['resultStatus'] == '9000';
  }

  // 微信支付
  static Future<bool> wechatPay(WechatPayParams params) async {
    final result = await fluwx.pay(
      appId: 'wx_your_appid',
      partnerId: params.partnerId,
      prepayId: params.prepayId,
      packageValue: params.packageValue,
      nonceStr: params.nonceStr,
      timeStamp: params.timeStamp,
      sign: params.sign
    );
    return result == fluwx.WeChatPaymentResult.success;
  }
  
  // 支付结果监听（全局事件）
  static void initPaymentListener() {
    AlipayKit.onPayResult.listen((result) {
      _handleResult(result);
    });
    
    fluwx.weChatResponseEventHandler.listen((res) {
      if (res is fluwx.WeChatPaymentResponse) {
        _handleWechatPayResult(res);
      }
    });
  }
}

---

2. 高性能图片加载（缓存+裁剪）

// 图片加载优化 - lib/widgets/smart_image.dart
import 'package:cached_network_image/cached_network_image.dart';

class SmartImage extends StatelessWidget {
  final String url;
  final BoxFit fit;
  
  const SmartImage({super.key, required this.url, this.fit = BoxFit.cover});
  
  @override
  Widget build(BuildContext context) {
    return CachedNetworkImage(
      imageUrl: url,
      fit: fit,
      progressIndicatorBuilder: (_, __, progress) => 
        CircularProgressIndicator(value: progress.progress),
      errorWidget: (_, __, ___) => const Icon(Icons.error),
      imageBuilder: (context, imageProvider) => Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          image: DecorationImage(
            image: imageProvider,
            fit: fit,
            // 添加材质设计效果
            colorFilter: ColorFilter.mode(
              Colors.black.withOpacity(0.1), 
              BlendMode.darken
            ),
          ),
        ),
      ),
    );
  }
}

---

3. 用户认证流程（Firebase集成）

// 三步实现手机登录 - lib/features/auth/provider/auth_provider.dart
import 'package:firebase_auth/firebase_auth.dart';

class AuthProvider with ChangeNotifier {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  
  // 发送短信验证码
  Future<void> sendOTP(String phone) async {
    await _auth.verifyPhoneNumber(
      phoneNumber: '+86$phone',
      verificationCompleted: (credential) async {
        _updateUser(await _auth.signInWithCredential(credential));
      },
      verificationFailed: (e) => throw FirebaseAuthException(e),
      codeSent: (verificationId, _) {
        _verificationId = verificationId; // 存储验证ID
      },
      timeout: const Duration(seconds: 60),
    );
  }
  
  // 提交验证码
  Future<void> submitOTP(String smsCode) async {
    final credential = PhoneAuthProvider.credential(
      verificationId: _verificationId!,
      smsCode: smsCode,
    );
    _updateUser(await _auth.signInWithCredential(credential));
  }
  
  // 更新用户状态
  void _updateUser(UserCredential credential) {
    // 保存到本地存储
    LocalStorage.saveUser(credential.user!);
    notifyListeners();
  }
}

---

4. 实时数据流（Firestore监听）

// 订单实时更新监听 - lib/features/orders/order_list.dart
StreamBuilder<QuerySnapshot>(
  stream: FirebaseFirestore.instance
      .collection('orders')
      .where('userId', isEqualTo: currentUserId)
      .orderBy('created_at', descending: true)
      .snapshots(),
  builder: (context, snapshot) {
    if (snapshot.hasError) return ErrorWidget(snapshot.error!);
    
    if (!snapshot.hasData) {
      return const CircularProgressIndicator();
    }
    
    return ListView.separated(
      itemCount: snapshot.data!.docs.length,
      separatorBuilder: (_, __) => const Divider(height: 1),
      itemBuilder: (context, index) {
        final order = Order.fromDoc(snapshot.data!.docs[index]);
        return OrderTile(order: order);
      },
    );
  },
),

---

5. 自适应布局方案

// 响应式布局工具类 - lib/utils/layout.dart
class LayoutUtil {
  static bool get isSmallScreen =>
      MediaQuery.of(context).size.width < 600;
      
  static bool get isMediumScreen =>
      MediaQuery.of(context).size.width >= 600 &&
      MediaQuery.of(context).size.width < 1200;
      
  static bool get isLargeScreen =>
      MediaQuery.of(context).size.width >= 1200;
      
  // 动态计算列数
  static int gridCrossAxisCount(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    if (width > 1200) return 4;
    if (width > 800) return 3;
    if (width > 600) return 2;
    return 1;
  }
}

// 使用示例
GridView.count(
  crossAxisCount: LayoutUtil.gridCrossAxisCount(context),
  children: products.map((p) => ProductCard(p)).toList(),
)

---

6. 路由过渡动画

// 自定义页面切换效果 - lib/app_router.dart
Route createRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, _, child) {
      const begin = Offset(1.0, 0.0);
      const end = Offset.zero;
      const curve = Curves.easeOut;
      
      final tween = Tween(begin: begin, end: end)
          .chain(CurveTween(curve: curve));
          
      return SlideTransition(
        position: animation.drive(tween),
        child: FadeTransition(
          opacity: animation,
          child: child,
        ),
      );
    },
  );
}

// 使用跳转
Navigator.push(
  context, 
  createRoute(DetailPage(product: product))
);

---

7. 全局状态管理（Riverpod最佳实践）

// 购物车状态管理 - lib/features/cart/cart_provider.dart
final cartProvider = StateNotifierProvider<CartNotifier, List<Product>>((ref) {
  return CartNotifier();
});

class CartNotifier extends StateNotifier<List<Product>> {
  CartNotifier() : super([]);
  
  void addProduct(Product product) {
    if (state.contains(product)) {
      state = [...state]; // 确保创建新列表
    } else {
      state = [...state, product];
    }
  }
  
  void removeProduct(String productId) {
    state = state.where((p) => p.id != productId).toList();
  }
}

// 在UI中使用
class AddToCartButton extends ConsumerWidget {
  final Product product;
  
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final inCart = ref.watch(cartProvider).contains(product);
    
    return IconButton(
      icon: Icon(inCart ? Icons.shopping_cart : Icons.add_shopping_cart),
      onPressed: () => ref.read(cartProvider.notifier).addProduct(product),
    );
  }
}

---

8. 异常捕获与日志上报

// 全局异常捕获 - main.dart
void main() async {
  runZonedGuarded(() async {
    WidgetsFlutterBinding.ensureInitialized();
    
    // 初始化FlutterError监听
    FlutterError.onError = (details) {
      _reportError(details.exception, details.stack);
    };
    
    runApp(const MyApp());
  }, (error, stack) {
    _reportError(error, stack);
  });
}

void _reportError(Object error, StackTrace stack) {
  // 1. 在控制台打印
  Developer.log('$error\n$stack');
  
  // 2. 上报到Sentry
  Sentry.captureException(error, stackTrace: stack);
  
  // 3. 保存到本地文件
  Logger.saveCrashReport(error, stack);
  
  // 4. 在测试环境下显示红屏错误
  if (kDebugMode) ErrorWidget.builder = _errorScreenBuilder;
}

Widget _errorScreenBuilder(FlutterErrorDetails details) => 
    Material(child: ErrorScreen(details));

---

9. 后台任务处理（定期同步数据）

// 使用workmanager处理后台任务 - lib/background/sync_service.dart
void callbackDispatcher() {
  Workmanager().executeTask((task, inputData) async {
    switch (task) {
      case 'daily_sync':
        await _syncDataToServer();
        return true;
      default:
        return false;
    }
  });
}

void initBackgroundService() {
  Workmanager().initialize(callbackDispatcher);
  
  // 注册每天凌晨3点同步
  Workmanager().registerPeriodicTask(
    'daily-sync-task',
    'daily_sync',
    frequency: const Duration(hours: 24),
    initialDelay: _calculateInitialDelay(),
    constraints: Constraints(networkType: NetworkType.connected),
  );
}

Duration _calculateInitialDelay() {
  final now = DateTime.now();
  final target = DateTime(now.year, now.month, now.day + 1, 3);
  return target.difference(now);
}

---

10. 动态主题切换（深色/浅色模式）

// 主题管理器 - lib/providers/theme_provider.dart
final themeProvider = StateNotifierProvider<ThemeNotifier, ThemeMode>(
  (ref) => ThemeNotifier(),
);

class ThemeNotifier extends StateNotifier<ThemeMode> {
  ThemeNotifier() : super(_loadSavedTheme());
  
  static ThemeMode _loadSavedTheme() {
    final saved = LocalStorage.getString('theme_mode');
    return saved == 'dark' 
      ? ThemeMode.dark 
      : (saved == 'light' ? ThemeMode.light : ThemeMode.system);
  }
  
  void toggleTheme() {
    final newMode = state == ThemeMode.dark 
      ? ThemeMode.light 
      : ThemeMode.dark;
      
    state = newMode;
    LocalStorage.saveString('theme_mode', modeToString(newMode));
  }
  
  String modeToString(ThemeMode mode) {
    return mode == ThemeMode.dark 
      ? 'dark' 
      : (mode == ThemeMode.light ? 'light' : 'system');
  }
}

// 在MaterialApp中使用
return Consumer(
  builder: (context, ref, _) {
    final themeMode = ref.watch(themeProvider);
    return MaterialApp(
      theme: AppTheme.lightTheme,
      darkTheme: AppTheme.darkTheme,
      themeMode: themeMode,
    );
  }
);

---