Flutter — значок префикса и суффикса в TextField

В этой статье мы реализуем , как добавить значки префикса и суффикса в TextField. Образец изображения приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.

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

Шаг 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: Теперь нам нужно создать виджет RunMyApp без сохранения состояния. Поскольку наше приложение не изменяет свое состояние, а затем возвращает виджет materialApp, который позволяет нам установить заголовок, тему и многое другое.

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

 @override
 Widget build(BuildContext context) {
   return MaterialApp(home:);
 }
}

Шаг 4: Дайте свойство home , и может быть виджет скаффолда со свойствами AppBar и body . AppBar позволяет нам указать заголовок AppBar, цвет, начальный и конечный значок. Тело содержит контейнер и дочернее текстовое поле. Мы можем украсить текстовое поле с помощью оформления ввода. Также мы можем добавить значки префикса и суффикса в оформление.

Scaffold(
       appBar: AppBar(
         title: Text("Prefix and Suffix Icon in TextField"),
       ),
       body: Container(
         padding: EdgeInsets.all(20.0),
         child: TextField(
           decoration: InputDecoration(
             border: UnderlineInputBorder(),
             hintText: "Email",
             labelText: "Email",
             prefixIcon:
                 IconButton(onPressed: () {}, icon: Icon(Icons.email_rounded)),
             suffixIcon: IconButton(
               icon: Icon(Icons.arrow_drop_down_circle),
               onPressed: () {},
             ),
           ),
           keyboardType: TextInputType.emailAddress,
           textInputAction: TextInputAction.done,
         ),
       ),
     ),

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

Выход