Flutter: salida de widgets condicionalmente

Flutter es el conjunto de herramientas de interfaz de usuario de Google para crear hermosas aplicaciones compiladas de forma nativa para dispositivos móviles, web y de escritorio a partir de una única base de código. Flutter proporciona varias formas de mostrar Widgets de forma condicional y en este artículo vamos a implementar todos los métodos.

Método 1 : Usar la condición If

Esta es la forma en que flutter muestra un widget si la condición es verdadera.

Sintaxis :

if (condition) 
  Widget()

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
  
      // to hide debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatelessWidget {
  
  /// boolean variable which is [true]
  final checked = true;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
  
        // AppBar
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
        ),
        body: Column(
          children: <Widget>[
  
            // A Simple Text Widget that will be visible
            // all the time
            Text(
              'First Widget',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
  
            /// if the condition is true
            /// [condition == true] then
            /// below Text will be displayed
            if (checked)
              Text(
                'Second Widget',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              )
          ],
        ),
      ),
    );
  }
}

Producción:

Método 2 : usar el operador ternario ( ? 🙂

  Es posible que haya utilizado este operador en otros lenguajes como C++, Java, etc.

Sintaxis :

condition ? Widget() : OtherWidget()

# if condition is true the Widget() is displayed else OtherWidget() is displayed.
Widget and OtherWidget could be any widget even Custom.

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
  
      // to hide debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatelessWidget {
    
/// boolean variable which is [true]
  final checked = true;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        // AppBar
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
        ),
        body: Column(
          children: <Widget>[
  
            // A Simple Text Widget that will be visible
            // all the time
            Text(
              'First Widget',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
  
            /// if the condition is true
            /// [condition == true] then
            /// below Text will be displayed
            /// else an [Empty Container] will be displayed
            checked
                ? Text(
                    'Second Widget',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  )
                : Container(),
          ],
        ),
      ),
    );
  }
}

Producción:

Nota : en lugar del operador ternario, también se puede usar la condición if-else . Esto también producirá el mismo resultado.

Método 3 : función personalizada

 Si desea tener más control sobre la lógica, simplemente devuelva un Widget. También puede usar su propia función. En este método, usted tiene el control total porque es libre de escribir tanto código como desee antes de mostrarlo. Así como también puede ejecutar condiciones complejas.

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
  
      // to hide debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatelessWidget {
    
  // boolean variable which is [true]
  final checked = true;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          
        // AppBar
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
        ),
        body: Column(
          children: <Widget>[
              
            // A Simple Text Widget that will be visible
            // all the time
            Text(
              'First Widget',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
  
            // Custom function
            condition(),
          ],
        ),
      ),
    );
  }
  
  // Function
  Widget condition() {
  
    // other logic  
    // Declare a widget variable,
    // it will be assigned later according
    // to the condition
    Widget widget;
  
    // Using switch statement to display desired
    // widget if any certain condition is met
    // You are free to use any condition
    // For simplicity I have used boolean contition
    switch (checked) {
      case true:
        widget = Text(
          'Second Widget',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        );
        break;
      case false:
        widget = Container();
        break;
      default:
        widget = Container();
    }
  
    // Finally returning a Widget
    return widget;
  }
}

Salida :

A continuación se muestra una aplicación de muestra para mostrar también la representación condicional para ListView .

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
  
      // to hide debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State<HomePage> {
  bool _selected;
  
  @override
  void initState() {
    _selected = false;
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
        ),
        body: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 8.0,
                vertical: 16.0,
              ),
  
              /// Checkbox Widget
              child: CheckboxListTile(
                title: Text('Data Structure'),
                value: _selected,
  
                /// Toggling Checkbox value and
                /// assigning it to _selected variable
                onChanged: (value) => setState(() => _selected = value),
              ),
            ),
  
            /// if selected variable is true i.e
            /// [selected == true] then list is visible
            /// otherwise it's not
            if (_selected)
              Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 16.0,
                  vertical: 8.0,
                ),
                child: Container(
                  height: MediaQuery.of(context).size.height * 0.6,
                  child: ListView(
                    children: <Widget>[
                      Text(
                        'Arrays',
                        style: TextStyle(fontSize: 16),
                      ),
                      Text(
                        'LinkedList',
                        style: TextStyle(fontSize: 16),
                      ),
                      Text(
                        'Stack',
                        style: TextStyle(fontSize: 16),
                      ),
                      Text(
                        'Tree',
                        style: TextStyle(fontSize: 16),
                      )
                    ],
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

Producción:

Nota : Aparte de esto, si desea mostrar los elementos de la lista directamente en la columna, puede utilizar el siguiente enfoque:

Column(
  children: [
  
  // some code  
  if (_selected)
    ...[
      Text(
        'Arrays',
        style: TextStyle(fontSize: 16),
      ),
      Text(
        'LinkedList',
        style: TextStyle(fontSize: 16),
      ),
      Text(
        'Stack',
        style: TextStyle(fontSize: 16),
      ),
      Text(
        'Tree',
        style: TextStyle(fontSize: 16),
      )
    ]
    
    // some code 
  ]
..., These strange three dots are spread operator.