סימון תיבת סימון
חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 28 מתוך 34.
תיבת סימון פועלת כמו מתג: value: לציור, ו־onChanged שעליו מגיבים באמצעות setState.
Checkbox(
value: _agreed,
onChanged: (bool? value) {
setState(() {
_agreed = value ?? false;
});
},
)הבדל אחד: הערך שלה הוא bool?, כלומר ערך בוליאני או null. לתיבת סימון יכול להיות מצב שלישי וריק, שלא תשתמש בו כאן. מכיוון ש־_agreed הוא ערך בוליאני רגיל, המירו null אפשרי ל־false באמצעות ??, כפי שעשיתם עם int.tryParse.
תיבת סימון היא לעיתים קרובות מה שמאפשר ללחוץ על כפתור: סמנו „אני מסכים” והכפתור „המשך” יפסיק להיות אפור.
אתגר
קל- סמן ובטל את הסימון בתיבת הסימון: שמור את הערך שלה ב־
_agreed. - הצג את
Continueבאפור עד שתיבת הסימון מסומנת.
נסו בעצמכם
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')),
],
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה הוספת אינטראקטיביות
תרגלו בעצמכם: קומפיילר Flutter אונליין