Flutter未来风格UI插件futuristic的使用

Flutter未来风格UI插件futuristic的使用

问题

在Flutter中，FutureBuilder widget在StatelessWidget中使用时，每次重建都会重新执行其Future。这可能在非幂等REST API调用中是不可接受的。如何解决这个问题？

解决方案

Futuristic插件提供了一种方法来安全地执行和重试Future，而无需每次都重建StatefulWidget。

使用示例

按钮示例

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const Home(),
      routes: {
        GoodScreen.routeName: (_) => const GoodScreen(),
        BadScreen.routeName: (_) => const BadScreen(),
      },
    );
  }
}

/// A future that completes successfully.
Future<int> goodFuture(int first, int second) async {
  await Future.delayed(const Duration(seconds: 1));
  return first + second;
}

// A future that completes with an exception.
Future<int> badFuture(int first, int second) async {
  await Future.delayed(const Duration(seconds: 1));
  throw Exception('Something happened');
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            SizedBox(height: 50, child: Center(child: GoodButton())),
            SizedBox(height: 50, child: Center(child: BadButton())),
            TextButton(
              child: const Text('Good screen example'),
              onPressed: () {
                Navigator.of(context).pushNamed(GoodScreen.routeName);
              },
            ),
            TextButton(
              child: const Text('Bad screen example'),
              onPressed: () {
                Navigator.of(context).pushNamed(BadScreen.routeName);
              },
            )
          ],
        ),
      ),
    );
  }
}

class GoodButton extends StatelessWidget {
  const GoodButton({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Futuristic<int>(
      futureBuilder: () =&gt; goodFuture(1, 2),
      initialBuilder: (_, start) =&gt; TextButton(onPressed: start, child: const Text('Good button example')),
      busyBuilder: (_) =&gt; const CircularProgressIndicator(),
      dataBuilder: (_, data) =&gt; Text(data.toString()),
    );
  }
}

class BadButton extends StatelessWidget {
  const BadButton({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Futuristic<int>(
      futureBuilder: () =&gt; badFuture(1, 2),
      initialBuilder: (_, start) =&gt; TextButton(onPressed: start, child: const Text('Bad button example')),
      busyBuilder: (_) =&gt; const CircularProgressIndicator(),
      errorBuilder: (_, error, retry) =&gt; TextButton(onPressed: retry, child: const Text('Sorry! Try again')),
    );
  }
}

class GoodScreen extends StatelessWidget {
  static const routeName = '/good';

  const GoodScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Good screen')),
      body: Center(
        child: Futuristic<int>(
          autoStart: true,
          futureBuilder: () =&gt; goodFuture(1, 2),
          busyBuilder: (_) =&gt; const CircularProgressIndicator(),
          dataBuilder: (_, data) =&gt; Text('Data is $data'),
        ),
      ),
    );
  }
}

class BadScreen extends StatelessWidget {
  static const routeName = '/bad';

  const BadScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Bad screen')),
      body: Center(
        child: Futuristic<int>(
          autoStart: true,
          futureBuilder: () =&gt; badFuture(1, 2),
          busyBuilder: (_) =&gt; const CircularProgressIndicator(),
          onError: (error, retry) async {
            await showDialog(
              context: context,
              builder: (innerContext) {
                return AlertDialog(
                  content: const Text('Sorry! Try again'),
                  actions: &lt;Widget&gt;[
                    TextButton(
                      child: const Text('RETRY'),
                      onPressed: () {
                        Navigator.of(innerContext).pop();
                        retry();
                      },
                    )
                  ],
                );
              },
            );
          },
        ),
      ),
    );
  }
}