Текстовое поле флаттера: как добавить иконку в рамку

Question

Я хотел бы добавить значок в строке поиска. Вот мой код до сих пор:

new TextField(
          decoration: new InputDecoration(
            icon: new Icon(Icons.search)
            labelText: "Describe Your Issue...",
            enabledBorder: const OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
              borderSide: const BorderSide(
                color: Colors.grey,
              ),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              borderSide: BorderSide(color: Colors.blue),
            ),
          ),
        ),

Это результат кода выше (это не то, что я хочу):

Вывод моего кода (это не то, что я хочу)

flutter flutter-layout

55

randomUser786 1 Май 2019 в 01:35

Answer 1

Отредактированный ответ

Обновление ответа как моего исходного ответа на самом деле не охватывает первоначальный контекст вопроса.

Вы можете использовать prefixIcon в TextField или в TextFormField, чтобы получить какой-нибудь виджет в качестве ведущего в TextField.

Примере

    TextField(
//    ...,other fields
      decoration: InputDecoration(
        prefixIcon: prefixIcon??Icon(Icons.done),
      ),
    ),

PS: не путайте между prefixIcon и prefix, так как эти два это разные вещи. https://api.flutter.dev/flutter/material/InputDecoration/prefix. HTML

Также, если вы хотите достичь чего-то вроде плавающей панели приложения, вы можете обратиться к моему первоначальному ответу.

<сильный> оригинальный ответ

Вы можете использовать мой пакет Flutter для реализации плавающей панели приложений в вашем приложении.

Вы должны добавить ниже пакет в вашем пабе.

rounded_floating_app_bar: ^0.1.0

Запустить $ flutter packages get из командной строки.

Теперь в вашем коде Dart вы можете использовать:

import 'package:rounded_floating_app_bar/rounded_floating_app_bar.dart';
...
NestedScrollView(
  headerSliverBuilder: (context, isInnerBoxScroll) {
    return [
      RoundedFloatingAppBar(
        floating: true,
        snap: true,
        title: TextField(
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.search),
            border: InputBorder.none,
          ),
        ),
      ),
    ];
  },
  body: Container(),
),

Выход:

Image Output

6

ibhavikmakwana 21 Апр 2020 в 12:41

Answer 2

Используйте префикс Icon в Just Adjust в Border Radius.

import 'package:flutter/material.dart';

class TextFieldShow extends StatelessWidget {
  TextEditingController _controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Tab demo"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextField(
            style: TextStyle(
              fontSize: 25.0,
              color: Colors.blueAccent,
            ),
            decoration: InputDecoration(
                contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                prefixIcon: Icon(Icons.people),
                hintText: "Enter Your Name",
                border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.blueAccent, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0)),
                focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.white, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0)))),
      ),
    );
  }
}

enter image description here

18

Neha Bhardwaj 1 Май 2019 в 04:45

Answer 3

Использовать префикс

Return TextFormField (

  decoration: InputDecoration(
      hintText: hint,
      labelText: label,
      prefixIcon: Icon(Icons.person),
      contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),

6

Suna Arun 19 Окт 2019 в 22:40

Answer 4

Попробуйте это сделать (используя prefixIcon ), просто настройте радиус рамки

TextField(
          style: TextStyle(fontSize: 25.0),
          decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
            prefixIcon: Icon(Icons.search),
            hintText: "Describe your issue",
            border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.red[300], width: 32.0),
                    borderRadius: BorderRadius.circular(25.0)
              ),
            focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.red[300], width: 32.0),
                    borderRadius: BorderRadius.circular(25.0)))

Надеюсь на эту помощь.

4

Hosar 1 Май 2019 в 00:18

Answer 5

Вы можете попробовать это:

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.grey.withOpacity(0.5),
      width: 1.0,
    ),
    borderRadius: BorderRadius.circular(4.0),
  ),
  margin: EdgeInsets.all(12),
  child: Row(
    children: <Widget>[
      Padding(
        padding: EdgeInsets.only(left: 8),
        child: Icon(
          Icons.search,
          color: Colors.grey,
          size: 20,
        ),
      ),
      new Expanded(
        child: TextField(
          keyboardType: TextInputType.text,
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: "Search by Name",
            hintStyle: TextStyle(color: Colors.grey),
            contentPadding:
                EdgeInsets.symmetric(vertical: 8, horizontal: 8),
            isDense: true,
          ),
          style: TextStyle(
            fontSize: 14.0,
            color: Colors.black,
          ),
        ),
      )
    ],
  ),
)

Будет отображаться как:

0

Jay Dhamsaniya 7 Май 2020 в 09:12

Текстовое поле флаттера: как добавить иконку в рамку

5 ответов

Похожие вопросы

Новые вопросы

flutter