Show

You should typically find yourself in the condition of wanting to render one widget or another based on the state of a signal.

Let's look at a simple example where we show the text 'Logged In' if the user is logged in or 'Logged out'.

// sample signal that tells if the user is logged in or not
final loggedIn = createSignal(false);

@override
Widget build(BuildContext context) {
  return SignalBuilder(
    signal: loggedIn,
    builder: (context, isUserLoggedIn, child) {
      if (isUserLoggedIn) return const Text('Logged in');
      return const Text('Logged out');
    },
  );
}

You may be tempted to use a SignalBuilder but with the Show widget is even simpler:

@override
Widget build(BuildContext context) {
  return Show(
    when: loggedIn,
    builder: (context) => const Text('Logged In'),
    fallback: (context) => const Text('Logged out'),
  );
}

The Show widget conditionally renders its builder or the fallback widget based on the when evaluation. The fallback widget builder is optional, by default nothing is rendered.

The Show widget takes a Signal of type bool, see Derived Signals to learn how to create a derived signal if your Signal is not of type bool.