Example of build a widget using Future.map()

[anthonyaquino83]

Hi guys, can you share an example of a Flutter page that shows a circular progress indicator, the result or the error when calling a future, please?

I'm trying something like:

final counterFutureSignal = futureSignal(counterFuture);

Future<String> counterFuture() async {
  print('counterFuture');
  await Future.delayed(const Duration(seconds: 1));
  return 'One second has passed.';
}

And trying build a widget like this but it's not working...

Builder(builder: (context) {
                counterFutureSignal.map(
                value: (value) => Text(
                  counterType.watch(context),
                  style: Theme.of(context).textTheme.headlineMedium!,
                ),
                loading: () => const CircularProgressIndicator(),
                error: (error) => Text(
                  counterType.watch(context),
                  style: Theme.of(context).textTheme.headlineMedium!,
                ),
              );
              return Text(
                'Initial',
                style: Theme.of(context).textTheme.headlineMedium!,
              );
            }),

[rodydavis]

Here is an example using the new Watch widget on 1.2.2:

final counterFutureSignal = futureSignal(counterFuture);

Future<String> counterFuture() async {
  print('counterFuture');
  await Future.delayed(const Duration(seconds: 1));
  return 'One second has passed.';
}
...
@override
Widget build(BuildContext context) {
  return Watch((context) {
    return counterFutureSignal.map(
      value: (value) => Text(
        value,
        style: Theme.of(context).textTheme.headlineMedium!,
      ),
      error: (error) => Text(
        'error:$error',
        style: Theme.of(context).textTheme.headlineMedium!,
      ),
      loading: () => const CircularProgressIndicator(),
    );
  });
}

[anthonyaquino83]

Hi, Rody, thanks for the answer, I experimented with the code below but it triggers the loading only (no more loading when I press the random button) once and when it 'randomly' throws an exception it crashes with 'Unhandled Exception: Exception: Exception'.
Is it a bug or am I doing wrong? 😊

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';

Future<int?> myFuture() async {
  print('myFuture');
  await Future.delayed(const Duration(milliseconds: 1000));
  int number = Random().nextInt(10);
  if (number.isEven) {
    return number;
  } else {
    throw Exception('Exception');
  }
}

final myFutureSignal = futureSignal(myFuture);

final counter = signal(0);
void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  void _random() async {
    counter.value++;
    myFutureSignal.value = await myFuture();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '${counter.watch(context)}',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            Watch((context) {
              return myFutureSignal.map(
                  value: (value) => Text(
                        value.toString(),
                        style: Theme.of(context).textTheme.headlineMedium!,
                      ),
                  error: (error) => Text(
                        'error:$error',
                        style: Theme.of(context).textTheme.headlineMedium!,
                      ),
                  loading: () {
                    print('loading');
                    return const CircularProgressIndicator();
                  });
            }),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _random,
        tooltip: 'Random',
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

[rodydavis]

Fixed on version 1.3.1:

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';

Future<int?> myFuture() async {
  print('myFuture');
  await Future.delayed(const Duration(milliseconds: 1000));
  int number = Random().nextInt(10);
  if (number.isEven) {
    return number;
  } else {
    throw Exception('Exception');
  }
}

final myFutureSignal = futureSignal(() => myFuture());

final counter = signal(0);
void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  void _random() async {
    counter.value++;
    myFutureSignal.reset();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '${counter.watch(context)}',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            Watch((context) {
              return myFutureSignal.map(value: (value) {
                print('value:$value');
                return Text(
                  value.toString(),
                  style: Theme.of(context).textTheme.headlineMedium!,
                );
              }, error: (error) {
                print('error:$error');
                return Text(
                  'error:$error',
                  style: Theme.of(context).textTheme.headlineMedium!,
                );
              }, loading: () {
                print('loading');
                return const CircularProgressIndicator();
              });
            }),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _random,
        tooltip: 'Random',
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

This was a good example and used it to test out some stuff. There was some exception and state not getting propagated. Also It now extends ReadonlySignal as you should never be able to set the future.

[rivella50]

Since FutureSignal is now deprecated: Does AsyncSignal also offer some sort of map method where the different states value, error and loading can be retrieved? Or how would your app above work with the latest Signals version by using AsyncSignal?

[jinyus]

@rivella50 Right now, you have to manually watch the error, completed and value signals on the parent signal. I'm not sure if there's a plan to make it more ergonomic.

[rivella50]

Ok, i guess that this can be reached by extending AsyncSignal then.

[rodydavis]

I was going to add the map feature to async signal if it would help.

I think just in general the new AsyncSignal makes the various states a lot easier though.

The only one that didn't make since was the loading state since a stream doesn't really have a loading state to wait for.

[rivella50]

That would be great, yes.

[rodydavis]

Added map,maybeMap to AsyncSignal on 1.5.4

[rivella50]

Cool, thank you so much. Will try it asap in a demo project.

[anthonyaquino83]

@rodydavis Hi Mr. Rody, any chance to update my example to the new AsyncSignal, please? The way I did it call an asyncsignal every time I enter the page (but it must call only when I press the button) and I can handle the loading state with a boolean signal but I'm not getting to show an text error widget with some hasError boolean signal...
And I gave up trying for now, LoL.

[rodydavis]

Sure I can update them!

[rodydavis]

Done!

[rodydavis]

Example using AsyncSignal:

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const Example(),
    );
  }
}

class Example extends StatefulWidget {
  const Example({super.key, required this.title});

  final String title;

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  final throwError = signal(false);
  final delay = signal(500);
  late final _futureSignal = futureSignal(() => _future());

  Future<int> _future() async {
    await Future.delayed(Duration(milliseconds: delay.value));
    if (throwError.value) {
      throw Exception('Error');
    } else {
      return Random().nextInt(1000);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 400),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Watch((_) {
                return SwitchListTile(
                  title: const Text('Throw Error'),
                  value: throwError.value,
                  onChanged: (value) => throwError.value = value,
                );
              }),
              Watch((context) {
                return ListTile(
                  title: const Text('Result'),
                  subtitle: _futureSignal.value.map(
                    data: (value) {
                      return Text(
                        value.toString(),
                        style: Theme.of(context).textTheme.headlineMedium!,
                      );
                    },
                    error: (error, _) {
                      return Text(
                        'error:$error',
                        style: Theme.of(context).textTheme.headlineMedium!,
                      );
                    },
                    loading: () {
                      return const Center(child: CircularProgressIndicator());
                    },
                    reloading: () {
                      return Text(
                        'reloading',
                        style: Theme.of(context).textTheme.headlineMedium!,
                      );
                    },
                    refreshing: () {
                      return Text(
                        'refreshing',
                        style: Theme.of(context).textTheme.headlineMedium!,
                      );
                    },
                  ),
                );
              }),
              Row(
                children: [
                  Flexible(
                    child: ElevatedButton(
                      child: const Text('Reload'),
                      onPressed: () => _futureSignal.reload(),
                    ),
                  ),
                  const SizedBox(width: 10),
                  Flexible(
                    child: ElevatedButton(
                      child: const Text('Refresh'),
                      onPressed: () => _futureSignal.refresh(),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

[rivella50]

It seems that the thrown exception is not handled correctly.

[rodydavis]

Fixed on 1.5.5

[rivella50]

Works better, but the thrown exception still leads to an unhandled exception error when using your updated example above:

I/flutter ( 4482): reloading
E/flutter ( 4482): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Exception: Exception
E/flutter ( 4482): #0      myFuture (package:signals_test/main.dart:13:5)
E/flutter ( 4482): <asynchronous suspension>
E/flutter ( 4482): #1      new Stream.fromFuture.<anonymous closure> (dart:async/stream.dart:241:17)
E/flutter ( 4482): <asynchronous suspension>

This didn't happen when using the now deprecated FutureSignal.

[rivella50]

What's also weird is that on app startup sometimes i get these print statements (without any user actions involved), where the progress indicator then never vanishes:

I/flutter ( 7401): myFuture
I/flutter ( 7401): loading
I/flutter ( 7401): loading
W/Parcel  ( 7401): Expecting binder but got null!
I/flutter ( 7401): loading
E/flutter ( 7401): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Exception: Exception
E/flutter ( 7401): #0      myFuture (package:signals_test/main.dart:13:5)
E/flutter ( 7401): <asynchronous suspension>
E/flutter ( 7401): #1      new Stream.fromFuture.<anonymous closure> (dart:async/stream.dart:241:17)
E/flutter ( 7401): <asynchronous suspension>

This behaviour only seems to happen when i set the AsyncSignal's initial value to null:

final myFutureSignal = asyncSignalFromFuture(myFuture, initialValue: null);

In both cases (initialValue is set to an int value or is set to null) i very often get that mentioned error in Stream.fromFuture - on startup and on reloading.

[rodydavis]

Should be fixed now!

[rodydavis]

This is getting reworked on this PR, but I think the API will work a lot better:

#78

[anthonyaquino83]

Great, it's working now, thanks, Rody! I'll keep testing. 😎