Флаттер — проверенная галочка

Во многих приложениях для Android нам необходимо подтвердить учетную запись пользователя. Отображение проверенного значка в приложении флаттера довольно просто. Мы можем использовать виджет видимости для отображения и скрытия значка. Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.

Как использовать?

Пошаговая реализация

Шаг 1. Создайте новый проект в Android Studio.

Чтобы настроить Flutter Development в Android Studio, обратитесь к разделу «Настройка Android Studio для разработки Flutter», а затем создайте новый проект в Android Studio, пожалуйста, обратитесь к разделу «Создание простого приложения во Flutter».

Шаг 2: Импорт пакета материалов

Добавление пакета материалов, который дает нам важные функции и вызывает метод runApp в основной функции, которая будет вызывать наше приложение.

import "package:flutter/material.dart";

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

Шаг 3. Создайте класс Stateful с именем RunMyApp.

Теперь нам нужно создать виджет с состоянием , потому что наше приложение меняет свое состояние, а затем возвращает виджет materialApp , который позволяет нам установить заголовок , тему и многое другое.

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: 
     );
 }
}

Шаг 4: Создание виджета Scaffold

Укажите свойство home , и может появиться виджет скаффолда со свойствами AppBar и body . AppBar позволяет нам указать заголовок AppBar, цвет, начальный и конечный значок. В теле есть виджет Center , у которого Column является дочерним элементом, у Again Column может быть несколько дочерних элементов. Здесь у нас есть виджет строки и виджет флажка.

 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;
                   });
                 }))
           ],
         ),
       ),
     ),

• Текстовый виджет используется для отображения текста «GeeksforGeeks».
• Виджет видимости используется для отображения проверенного круглого значка зеленого цвета. Видимое свойство должно быть истинным.
• CheckBox используется, чтобы сделать значение переменной isverified истинным или ложным. Если мы установим флажок, проверенный значок будет виден иначе.

Окончательный код

Выход