Marcar uma caixa de seleção
Parte da seção Tornando o app interativo do Journey de Flutter da Coddy. Lição 28 de 34.
Um Checkbox funciona como um Switch: um value: para desenhar e um onChanged ao qual você responde com setState.
Checkbox(
value: _agreed,
onChanged: (bool? value) {
setState(() {
_agreed = value ?? false;
});
},
)Uma diferença: seu valor é um bool?, um bool ou null. Uma caixa de seleção pode ter um terceiro estado, vazio, que você não vai usar aqui. Como _agreed é um bool simples, transforme um possível null em false com ??, como você fez com int.tryParse.
Uma caixa de seleção costuma ser o que permite pressionar um botão: marque "I agree" e Continue deixa de ficar cinza.
Desafio
Fácil- Faça a caixa de seleção ser marcada e desmarcada: armazene seu valor em
_agreed. - Desative
Continueaté que a caixa seja marcada.
Experimente você mesmo
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> {
bool _agreed = false;
void _continue() {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Welcome!')),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Rules')),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Checkbox(
value: _agreed,
onChanged: (bool? value) {},
),
const Text('I agree to the rules'),
],
),
const SizedBox(height: 16),
ElevatedButton(onPressed: _continue, child: const Text('Continue')),
],
),
),
);
}
}
Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Tornando o app interativo
1Botões
Seu primeiro botãoImprimir no consoleBotões de texto e contornoBotões com íconesO botão de ação flutuante7Interruptores e controles deslizantes
Ligar e desligar com um interruptorMarcar uma caixa de seleçãoEscolher um valor com um controle deslizantePratique por conta própria: Compilador de Flutter online