Add validation to the dropdown

Year-3-Assignments · Aug 2, 2021 · 80272f5 · 80272f5
1 parent 9813ebf
commit 80272f5
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 27 deletions.
diff --git a/assets/images/home_top.png b/assets/images/home_top.png
diff --git a/lib/components/rounded_dropdown_feild.dart b/lib/components/rounded_dropdown_feild.dart
@@ -1,43 +1,46 @@
-import 'package:dropdown_formfield/dropdown_formfield.dart';
 import 'package:flutter/material.dart';
 
 class RoundedDropDownFeild extends StatefulWidget {
   final ValueChanged<String> onChange;
   final String text;
   final bool isRequiredFeild;
+  final bool isCountry;
 
   const RoundedDropDownFeild({
     Key key,
     this.isRequiredFeild,
     this.onChange,
     this.text,
-  });
+    this.isCountry,
+  }) : super(key: key);
 
   @override
   _RoundedDropDownFeildState createState() => _RoundedDropDownFeildState(
         isRequiredFeild: isRequiredFeild,
         onChange: onChange,
         text: text,
+        isCountry: isCountry,
       );
 }
 
 class _RoundedDropDownFeildState extends State<RoundedDropDownFeild> {
   final ValueChanged<String> onChange;
   final String text;
   final bool isRequiredFeild;
-  String _country = 'Sri Lanka';
+  final bool isCountry;
+  bool _isFieldValid;
 
   _RoundedDropDownFeildState({
     Key key,
     this.isRequiredFeild,
     this.onChange,
     this.text,
+    this.isCountry,
   });
 
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
-
     return Container(
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -55,29 +58,113 @@ class _RoundedDropDownFeildState extends State<RoundedDropDownFeild> {
             height: size.height * 0.005,
           ),
           DropDownContainer(
-            child: DropdownButtonFormField<String>(
-              items: data
-                  .map(
-                    (item) => DropdownMenuItem(
-                      child: Text(
-                        item,
-                        style: TextStyle(
-                          fontFamily: 'Larsseit',
-                          fontSize: 20,
-                        ),
+            child: isCountry != null && isCountry
+                ? DropdownButtonFormField<String>(
+                    validator: (value) {
+                      if (value == null) {
+                        value = '';
+                      }
+                      if (value.isEmpty) {
+                        setState(() {
+                          _isFieldValid = false;
+                        });
+                        return null;
+                      } else {
+                        setState(() {
+                          _isFieldValid = true;
+                        });
+                        return null;
+                      }
+                    },
+                    items: countries
+                        .map(
+                          (item) => DropdownMenuItem(
+                            child: Text(
+                              item,
+                              style: TextStyle(
+                                fontFamily: 'Larsseit',
+                                fontSize: 20,
+                              ),
+                            ),
+                            value: item,
+                          ),
+                        )
+                        .toList(),
+                    hint: Text(
+                      'Select your country',
+                      style: TextStyle(
+                        fontFamily: 'Larsseit',
+                        fontSize: 20,
+                        color: Colors.grey[600],
                       ),
-                      value: item,
                     ),
+                    decoration: InputDecoration(
+                      border: InputBorder.none,
+                    ),
+                    onChanged: onChange,
                   )
-                  .toList(),
-              hint: Text('Select your country'),
-              decoration: InputDecoration(
-                border: InputBorder.none,
-              ),
-              onChanged: (value) {
-                print(value);
-              },
-            ),
+                : DropdownButtonFormField<String>(
+                    validator: (value) {
+                      if (value == null) {
+                        value = '';
+                      }
+                      if (value != null && value.isEmpty) {
+                        setState(() {
+                          _isFieldValid = false;
+                        });
+                        return null;
+                      } else {
+                        setState(() {
+                          _isFieldValid = true;
+                        });
+                        return null;
+                      }
+                    },
+                    items: titles
+                        .map(
+                          (item) => DropdownMenuItem(
+                            child: Text(
+                              item,
+                              style: TextStyle(
+                                fontFamily: 'Larsseit',
+                                fontSize: 20,
+                              ),
+                            ),
+                            value: item,
+                          ),
+                        )
+                        .toList(),
+                    hint: Text(
+                      'Select your title',
+                      style: TextStyle(
+                        fontFamily: 'Larsseit',
+                        fontSize: 20,
+                        color: Colors.grey[600],
+                      ),
+                    ),
+                    decoration: InputDecoration(
+                      border: InputBorder.none,
+                    ),
+                    onChanged: onChange,
+                  ),
+          ),
+          isRequiredFeild != null &&
+                  isRequiredFeild &&
+                  _isFieldValid != null &&
+                  !_isFieldValid
+              ? Padding(
+                  padding: EdgeInsets.only(left: 15),
+                  child: Text(
+                    text + ' is required!',
+                    style: TextStyle(
+                      color: Colors.red[800],
+                      fontFamily: 'Larsseit',
+                    ),
+                  ),
+                )
+              : Text(''),
+          SizedBox(
+            height: size.height * 0.010,
           ),
         ],
       ),
@@ -108,4 +195,32 @@ class DropDownContainer extends StatelessWidget {
   }
 }
 
-List<String> data = ['Sri Lanka', 'India'];
+List<String> countries = [
+  '🇱🇰 Sri Lanka',
+  '🇮🇳 India',
+  '🇧🇩 Bangaladesh',
+  '🇵🇰 Pakistan',
+  '🇳🇵 Nepal',
+  '🇨🇳 China',
+  '🇯🇵 Japan',
+  '🇷🇺 Russia',
+  '🇳🇿 New Zealand',
+  '🇦🇺 Australia',
+  '🇺🇸 United States',
+  '🇬🇧 United Kingdom',
+  '🇮🇹 Italy'
+];
+
+List<String> titles = [
+  '🧔 Mr.',
+  '👩 Mrs.',
+  '🧑‍🦱 Mast.',
+  '👱‍♀️ Miss',
+  '👨‍⚕️ Dr.',
+  '👨‍⚕️ Dr (Ms.)',
+  '👩‍⚕️ Dr (Mrs.)',
+  '👨‍🔬 Prof.',
+  '👨‍🔬 Prof (Ms.)',
+  '👩‍🔬 Prof (Mrs.)',
+  '👶 Baby'
+];
diff --git a/lib/screens/signup/signup_form_1.dart b/lib/screens/signup/signup_form_1.dart
@@ -56,9 +56,10 @@ class _SignUpForm1State extends State<SignUpForm1> {
               ),
               RoundedDropDownFeild(
                 text: 'Your Country',
-                isRequiredFeild: false,
+                isRequiredFeild: true,
+                isCountry: true,
                 onChange: (text) {
-                  print('this is test');
+                  print('this is test' + text);
                 },
               ),
               RoundedTextFeild(