Menu
CoddyTech

Decisiones con if y else

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 18 de 34.

if ejecuta código solo cuando algo es verdadero. else ejecuta otro código cuando no lo es:

if (_count < 10) {
  _count++;
} else {
  print('Full');
}

Lo que va entre paréntesis es una comparación, cuyo resultado es un valor booleano: verdadero o falso.

  • a == b: a es igual a b (dos signos de igual; uno se usa para asignarle un valor a una variable)
  • a != b: a no es igual a b
  • a < b y a > b: menor que, mayor que
  • a <= b y a >= b: menor o igual que, mayor o igual que

Ten cuidado con el límite: con 8 vasos, _glasses < 8 es falso, pero _glasses <= 8 sigue siendo verdadero y permite servir un noveno vaso.

Dentro de la clase State, context está disponible en todos los métodos, no solo en build, así que un método también puede mostrar una SnackBar.

challenge icon

Desafío

Fácil

Ocho vasos de agua al día son suficientes. Cambia _drink para que añada un vaso solo mientras haya menos de 8. De lo contrario, muestra un SnackBar que diga That is enough for today.

Pruébalo tú mismo

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _glasses = 0;

  void _drink() {
    setState(() {
      _glasses++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Water')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Glasses today: $_glasses', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 16),
            ElevatedButton(onPressed: _drink, child: const Text('Drink a glass')),
          ],
        ),
      ),
    );
  }
}
quiz iconPonte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Cómo hacerla interactiva

Practica por tu cuenta: Compilador de Flutter online