Flutter – Verified Tick
Last Updated :
23 Nov, 2022
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?
Dart
Visibility(
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
Dart
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
Share your thoughts in the comments
Please Login to comment...