Skip to main content

Posts

Showing posts from September, 2021

Form and TextFormField in Flutter

What is Form? Flutter provides a Form widget to create a form in which we can get the data from users. The form is widget acts as a container for grouping and validating multiple form fields. the form can contain TextFormField, buttons, text, images, and many more. When creating the form, provide a GlobalKey. This uniquely identifies the Form and allows validation of the form in a later step. Inside this class, we define a global key as _formKey. This key holds a FormState and can use to retrieve the form widget.  What is TextFormField ? The form widget uses child widget TextFormField to provide the users to enter the text field. This widget renders a material design text field and also allows us to display validation errors when they occur. So, here we are creating an example of form validation with the use of  TextFormField.  Now, let's start with an example we are doing step by step implementation for Form and TextFormField. 1. Create the Form widg...

Flutter SingleChildScrollView

What is SingleChildScrollView? To create a simple vertical ScrollView which can contain different types of widgets with different behavior we would use SingleChildScrollView Widget.SingleChildScrollView Widget is a box that can scroll a single widget. Widget In the below example code snippet we are creating a function called _createContainer() that accepts Color and text as an argument and it returns Container() widget with height: 200 pixels. We will reuse this widget many times in the Column. Without SingleChildScrollView Now we are creating a Column widget and add some containers to it with the use of creating widget function _createContainer(). If you run this code snippet in your app, the column will look like this as shown in the image below. With SingleChildScrollView Now we are wrapping the Column widget with a SingleChildScrollView scrolling widget, the information on the page should scroll and not showing any error. If you run this code snippet in your app, the colu...