Enjoy The Vue

Flutter-Tools Help

Published 1 months ago5 min read4 comments
image

Note: The purpose of this tool is to rapidly create a working, stateful Flutter form using Hive for data storage. It works as advertised. For a complete app, just add something like a ListView and a little navigation.

Using Flutter-Tools is simple. Just paste in a csv list or the fields from a Javascript object, a C# class, or a Java class constructor and hit "Go."

A table will show all the fields, which you can then simply map to a Flutter TextFormField or DropdownButtonFormField widget.

Note: The table rows are drag and drop. You can change the order of the fields by arranging the order of the table rows before generating the Flutter data.

For each row in the table, select the input type for the widget. Change the label text if needed. Adding any text for the hint/placeholder text will generate the hintText property on the widget. Leave it blank if you don't want hint/placeholder text on the widget.

The "Req" checkbox makes the field required and forces validation.

The "Label" checkbox will add or remove the label property from the FormKit node.

Sample data formats include:

Comma Separated Values
							
Field1, Field2, Field3, Field4	
							
						
C# Class File
					    
public string CustomerId { get; set; }
public string CustomerCommon { get; set; }
public string CustomerAddress { get; set; }
public string CustomerCity { get; set; }
public string CustomerState { get; set; }
public string CustomerZip { get; set; }
public string CustomerEmail { get; set; }
					    
				    
Javascript Objects
					    
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

// or

firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
					    
				    
Javascript Class Constructors
					    
this.name = name;
this.surname = surname;
					    
				    
A Java Class constructor
					    
gear = startGear;
cadence = startCadence;
speed = startSpeed;
					    
				    

Once the Flutter data is generated, simply create empty files in your VSCode project and copy the respective output into the appropriate file.

When completed and added to a project, the app will look similar to this app:

image
https://github.com/sbis04/hive_demo/blob/main/screenshots/hive_demo.gif (unaffiliated)

Note: If the input type for a field is not selected, nothing will be generated for that table row.

Note: If you only have one field to generate, just type it in and add a comma after it (e.g. Field1,).

Note: No user input is saved in any way.

References:
  • A complete flutter/Hive demo app. Hive Demo (unaffiliated).
Choose Colour