Flutter - Verified Tick

In many Android applications, we need to make the user account verified. Showing the verified icon in the flutter application is pretty simple. We can use the visibility widget to show and hide the icon. A sample video is given below to get an idea about what we are going to do in this article.

How to Use?

  Visibility(
         // if visibility is true, the child 
         // widget will show otherwise hide
         visible: true,  
         child: Icon(
         Icons.verified_rounded,
         color: Colors.green,
        ),
  )

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package

Adding material package that gives us the important functions and calls the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

Step 3: Create the Stateful class named RunMyApp

Now we have to make a stateful widget because our application does change its state and then returns the materialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatefulWidget {
 const RunMyApp({super.key});
 @override
 State<RunMyApp> createState() => _RunMyAppState();
}
class _RunMyAppState extends State<RunMyApp> {
 bool val = false;
 bool isverified = false;
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     theme: ThemeData(primarySwatch: Colors.green),
     home: 
     );
 }
}

Step 4: Creating Scaffold Widget

Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon. The body has the Center widget that has Column as a child, Again Column can have multiple children. Here we have the Row Widget and Check box widget.

 home: Scaffold(
       appBar: AppBar(
         title: Text('GeeksforGeeks'),
       ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 Text(
                   'GeeksforGeeks',
                   style: TextStyle(fontSize: 50),
                 ),
                 Visibility(
                     visible: isverified,
                     child: Icon(
                       Icons.verified_rounded,
                       color: Colors.green,
                     ))
               ],
             ),
             Checkbox(
                 value: val,
                 onChanged: ((value) {
                   setState(() {
                     val= value!;
                     isverified = value;
                   });
                 }))
           ],
         ),
       ),
     ),

• Text widget is used to display the text 'GeeksforGeeks'.
• Visibility widget is used to show the verified rounded icon of the color green. Visible property should be true.
• CheckBox is used to make the value of isverified variable true or false, If we check the check box then the verified icon is seen otherwise not.

Final Code

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  bool val = false;
  bool isverified = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'GeeksforGeeks',
                    style: TextStyle(fontSize: 50),
                  ),
                  Visibility(
                      visible: isverified,
                      child: Icon(
                        Icons.verified_rounded,
                        color: Colors.green,
                      ))
                ],
              ),
              Checkbox(
                  value: val,
                  onChanged: ((value) {
                    setState(() {
                      val= value!;
                      isverified = value;
                    });
                  }))
            ],
          ),
        ),
      ),
    );
  }
}

Output