Created
May 18, 2021 15:57
-
-
Save mwangipeter/ee781884661c50f18d1d16e107cb3f4c to your computer and use it in GitHub Desktop.
A template of a tab used in one of my first flutter projects.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
class WidGetName extends StatefulWidget { | |
@override | |
_WidGetNameState createState() => _WidGetNameState(); | |
} | |
class _WidGetNameState extends State<WidGetName> with AutomaticKeepAliveClientMixin<WidGetName> { | |
//Define FormKey here | |
GlobalKey<FormState> _formKey = GlobalKey<FormState>(); | |
//Define list to go to dropdown list here. | |
var dropdownList = ["item 1", "item 2"]; | |
//Define default Dropdown Item here. e.g. var selectedMachinery = "Lorry"; | |
var selectedDropdownItem = "item 1"; | |
//Define the Model Instance Here e.g. MachineryModel _machinery = MachineryModel(); | |
MachineryModel _machinery = MachineryModel(); | |
//Define list of added items here. E.g List<MachineryModel> _items = [];. Should be empty at start so it is populated when new items are added. | |
List<MachineryModel> _items = []; | |
// Define variables that will be populated with data from the dialog form here. e.g. var timeDeployedString | |
//Define the showInformationDialog here to show the dialog form here when the floatingActionButton is pressed. | |
Future<void> showInformationDialog(BuildContext context) async { | |
//Give default values to the empty variables defined above. | |
selectedDropdownItem = "item 1"; | |
//return the showDialog method here to create the dialog. | |
return await showDialog( | |
context: context, | |
builder: (context) { | |
//Define textEditingControllers here. e.g. final TextEditingController _textEditingControllerPlateNo = TextEditingController(); | |
final TextEditingController _textEditingControllerPlateNo = TextEditingController(); | |
//Create the stateful builder here to build a stateful alert dialog. | |
return StatefulBuilder(builder: (context, setState) { | |
//Define stateful variables here inside of the Stateful Builder. e.g. TimeOfDay _timeMachineryDeployed; | |
TimeOfDay _timeMachineryDeployed; | |
TimeOfDay _timeMachineryPicked; | |
// Define future methods here that will require data input from the user e.g. | |
/* | |
Future<Null> selectMachineryDeployed(BuildContext context) async { | |
_timeMachineryDeployed = await showTimePicker( | |
context: context, | |
initialTime: TimeOfDay(hour: 8, minute: 0), | |
); | |
setState(() { | |
if(_timeMachineryDeployed != null) { | |
timeDeployedString = '${_timeMachineryDeployed.hour.toString().padLeft(2, '0')}:${_timeMachineryDeployed.minute.toString().padLeft(2, '0')}'; | |
} | |
else { | |
timeDeployedString = "Select Time"; | |
} | |
}); | |
} | |
*/ | |
//Return the alert dialog here with a form. | |
return AlertDialog( | |
//Use a singlechild scroll view to make the form scrollable. | |
content: SingleChildScrollView( | |
child: Form( | |
key: _formKey, | |
child: Column( | |
crossAxisAlignment: CrossAxisAlignment.start, | |
mainAxisSize: MainAxisSize.min, | |
children: <Widget>[ | |
Text("Pick a Machinery"), | |
Row( | |
children: [ | |
Icon( | |
Icons.car_rental, | |
color: Colors.amber, | |
), | |
SizedBox(width: 20,), | |
/* | |
This is a sample of a stateful DropDown Button. | |
DropdownButton( | |
hint: Text("Pick a Machinery"), | |
items: machinery.map((String dropDownStringItem){ | |
return DropdownMenuItem<String>( | |
value: dropDownStringItem, | |
child: Text(dropDownStringItem) | |
); | |
}).toList(), | |
onChanged: (String newSelectedMachinery) { | |
setState(() { | |
this.selectedMachinery = newSelectedMachinery; | |
}); | |
}, | |
value: selectedMachinery, | |
), | |
*/ | |
], | |
), | |
SizedBox(height: 10,), | |
Container( | |
width: 400, | |
/* | |
This is a sample of a TextFormField with validator and controller. | |
TextFormField( | |
controller: _textEditingControllerPlateNo, | |
validator: (value) { | |
return value.isNotEmpty ? null : "Cannot be Empty"; | |
}, | |
onSaved: (val) => setState(() => _machinery.plateNo = val), | |
decoration: InputDecoration( | |
border: OutlineInputBorder(), | |
icon: Icon(Icons.construction, color: yellowColor,), | |
labelText: 'Enter the Plate Number', | |
), | |
), | |
*/ | |
), | |
SizedBox(height: 10,), | |
Row( | |
children: [ | |
Icon( | |
Icons.watch_later_outlined, | |
color: Colors.amber, | |
), | |
//Here | |
SizedBox(width: 10,), | |
Column( | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: <Widget>[ | |
Divider(), | |
/* | |
This is a sample of a time picker button. | |
TextButton.icon( | |
//icon: Icon(Icons.alarm), | |
icon: Icon( | |
Icons.watch_later_outlined, | |
color: blackColor, | |
), | |
label: Text( | |
timeDeployedString, | |
style: TextStyle( | |
letterSpacing: 2, | |
fontSize: 18, | |
color: Colors.black, | |
), | |
), | |
onPressed: (){ | |
selectMachineryDeployed(context); | |
}, | |
), | |
*/ | |
], | |
), | |
], | |
), | |
SizedBox(height: 10,), | |
], | |
), | |
), | |
), | |
/* | |
This is a sample of the actions part of the alert dialog. | |
actions: [ | |
Center( | |
child: Row( | |
children: [ | |
TextButton( | |
onPressed: () { | |
Navigator.of(context).pop(); | |
}, | |
child: Text("CANCEL") | |
), | |
TextButton( | |
onPressed: () => _onSubmit(), | |
child: Text("ADD") | |
) | |
], | |
), | |
) | |
], | |
*/ | |
actions: [], | |
); | |
}); | |
} | |
); | |
} | |
/* | |
This is a sample of the onSubmit Method. | |
_onSubmit() { | |
print(timeDeployedString); | |
print(timePickedString); | |
if(_formKey.currentState.validate()) { | |
var form = _formKey.currentState; | |
form.save(); | |
_machinery.description = selectedMachinery; | |
_machinery.deployedFrom = timeDeployedString; | |
_machinery.deployedTo = timePickedString; | |
setState (() { | |
_items.add(MachineryModel(id: null, description: _machinery.description, plateNo: _machinery.plateNo, deployedFrom: _machinery.deployedFrom, deployedTo: _machinery.deployedTo)); | |
}); | |
form.reset(); | |
Navigator.of(context).pop(); | |
} | |
} | |
*/ | |
@override | |
bool get wantKeepAlive => true; | |
@override | |
Widget build(BuildContext context) { | |
super.build(context); | |
return Scaffold( | |
appBar: AppBar( | |
leading: Container(), | |
title: Text( | |
'Machinery', | |
style: TextStyle( | |
color: darkGreyColor | |
), | |
), | |
centerTitle: true, | |
backgroundColor: Colors.white, | |
actions: <Widget>[ | |
IconButton( | |
icon: Icon(Icons.handyman), | |
onPressed: () {}) | |
], | |
), | |
body: Column( | |
children: [ | |
_displayList() | |
], | |
), | |
floatingActionButton: FloatingActionButton( | |
onPressed: () async { | |
await showInformationDialog(context); | |
}, | |
tooltip: 'Increment', | |
child: Icon( | |
Icons.add, | |
color: yellowColor, | |
), | |
backgroundColor: darkGreyColor, | |
), | |
); | |
} | |
//The List to display items on the screen once added should come here. e.g. | |
/* | |
_machineryList() { | |
return Expanded( | |
child: Card( | |
//margin: EdgeInsets.fromLTRB(20, 30, 20, 0), | |
child: ListView.builder( | |
padding: EdgeInsets.all(8), | |
itemBuilder: (context, index) { | |
return Column( | |
children: <Widget>[ | |
ListTile( | |
leading: Icon( | |
Icons.car_rental, | |
color: yellowColor, | |
size: 40, | |
), | |
title: Text( | |
_items[index].description.toUpperCase(), | |
style: TextStyle( | |
color: darkGreyColor, | |
fontWeight: FontWeight.bold, | |
), | |
), | |
subtitle: Text(_items[index].plateNo), | |
trailing: Icon( | |
Icons.edit, | |
color: darkGreyColor, | |
), | |
), | |
Divider( | |
height: 5, | |
) | |
], | |
); | |
}, | |
itemCount: _items.length, | |
), | |
) | |
); | |
} | |
*/ | |
_displayList () { | |
} | |
onSubmit() { | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment