I am have this app that uses a checkbox to receive inputs from users, for example select a type of storage you want (NVMe, ssd, hdd etc) i want a solution that if a checkbox or multiple checkboxes are selected, it outputs their values on the summary screen.I have tried youtube tutorials, i did not quite understand them. Here is my code thanks
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:signoff_app/Screens/preview.dart';
import 'package:signoff_app/storage/store.dart';
import 'package:signoff_app/widget/textformfields.dart';
class NewSign extends StatefulWidget {
NewSign({Key? key}) : super(key: key);
@override
State<NewSign> createState() => _NewSignState();
}
class _NewSignState extends State<NewSign> {
bool ssd = false;
bool hdd = false;
bool nvme = false;
bool m2 = false;
TextEditingController pcname = new TextEditingController();
TextEditingController motherboard = new TextEditingController();
TextEditingController casing = new TextEditingController();
TextEditingController ramSize = new TextEditingController();
TextEditingController ram = new TextEditingController();
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: Text(
'Sign Off a Computer',
style: GoogleFonts.lato(
fontSize: 16,
fontStyle: FontStyle.normal,
),
),
),
body: Container(
width: MediaQuery.of(context).size.width,
// color: Colors.black54,
child: Stack(
children: [
Container(
//margin: EdgeInsets.fromLTRB(24, 0, 0, 24),
padding: EdgeInsets.fromLTRB(32, 64, 32, 32),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
// color: Colors.black54,
child: Column(
children: [
Expanded(
flex: 1,
child: SizedBox(
width: 100,
height: 100,
child: Image(
fit: BoxFit.contain,
image: AssetImage("./images/udlogo.png"),
),
),
),
Expanded(
flex: 3,
child: Column(
children: [
Row(
children: [
Expanded(
flex: 2,
child: TextFormField(
controller: pcname,
validator: (val) {
if (val!.isEmpty) {
return "required";
}
},
decoration: InputDecoration(
labelText: 'Pc Name',
// errorText: 'please enter pc name'
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: BorderSide(
color: Colors.blue,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6.0),
borderSide: BorderSide(
color: Colors.grey,
width: 1.5,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6.0),
borderSide: BorderSide(
color: Colors.red,
width: 1.5,
),
),
),
),
),
SizedBox(
width: 24,
),
Expanded(
flex: 2,
child: TextFormField(
controller: motherboard,
decoration: InputDecoration(
labelText: 'MotherBoard',
// errorText: 'please enter pc name'
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: BorderSide(
color: Colors.blue,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6.0),
borderSide: BorderSide(
color: Colors.grey,
width: 1.5,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6.0),
borderSide: BorderSide(
color: Colors.red,
width: 1.5,
),
),
),
),
),
],
),
SizedBox(
height: 62,
),
Row(
children: [
Expanded(
flex: 2,
child: TextFormField(
controller: ram,
validator: (val) {
if (val!.isEmpty) {
return "required";
}
},
decoration: InputDecoration(
labelText: 'Ram',
// errorText: 'please enter pc name'
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: BorderSide(
color: Colors.blue,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6.0),
borderSide: BorderSide(
color: Colors.grey,
width: 1.5,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6.0),
borderSide: BorderSide(
color: Colors.red,
width: 1.5,
),
),
),
),
),
SizedBox(
width: 24,
),
Expanded(
flex: 2,
child: TextFormField(
controller: casing,
decoration: InputDecoration(
labelText: 'Casing',
// errorText: 'please enter pc name'
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: BorderSide(
color: Colors.blue,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6.0),
borderSide: BorderSide(
color: Colors.grey,
width: 1.5,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6.0),
borderSide: BorderSide(
color: Colors.red,
width: 1.5,
),
),
),
),
),
],
),
SizedBox(height: 24),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Storage',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w900,
),
),
SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
//ssd checkbox
Text("SSD"),
SizedBox(width: 2),
Checkbox(
value: ssd,
onChanged: (bool? value) {
setState(() {
ssd = value!;
});
},
),
//hdd checkbox
SizedBox(width: 16),
Text("HDD"),
SizedBox(width: 2),
Checkbox(
value: hdd,
onChanged: (bool? value) {
setState(() {
hdd = value!;
});
},
),
SizedBox(width: 16),
//Nvme checkbox
Text("NVMe"),
SizedBox(width: 2),
Checkbox(
value: nvme,
onChanged: (bool? value) {
setState(() {
ssd = value!;
});
},
),
//m.2 checkbox
SizedBox(width: 16),
Text("M.2"),
SizedBox(width: 2),
Checkbox(
value: m2,
onChanged: (bool? value) {
setState(() {
m2 = value!;
});
},
),
],
),
],
),
],
),
),
Expanded(
flex: 1,
child: Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: 45,
child: ElevatedButton(
style:
ElevatedButton.styleFrom(primary: Colors.red),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => PreviewSel(pcname.text,
motherboard.text, ram.text, casing.text),
),
);
},
child: Text('Submit'),
),
),
),
),
],
),
),
],
),
),
),
);
}
}
