Flutter Text Field: cómo agregar un icono dentro del borde

Por fin luego de mucho trabajar ya hallamos el arreglo de esta contrariedad que tantos lectores de este espacio han presentado. Si tienes algún detalle que aportar no dudes en dejar tu comentario.

Solución:

Respuesta editada

Actualizar la respuesta ya que mi respuesta original en realidad no cubre el contexto original de la pregunta.

Puedes usar el prefixIcon en el TextField o en el TextFormField para obtener algún widget como líder en su TextField.

Ejemplo

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

PD: No te confundas entre prefixIcon y prefix ya que estos dos son cosas diferentes. https://api.flutter.dev/flutter/material/InputDecoration/prefix.html

Además, si desea lograr algo como una barra de aplicaciones flotante, puede consultar mi respuesta original.

respuesta original

Puede usar mi paquete Flutter para implementar la barra de aplicaciones flotante en su aplicación.

Debe agregar el siguiente paquete en su pub.

rounded_floating_app_bar: ^0.1.0

correr $ flutter packages get desde la línea de comandos.

Ahora en su código Dart, puede usar:

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(),
),

Producción:

Use el icono de prefijo en Solo ajuste en Boarder 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)))),
      ),
    );
  

usar prefijoicono

devuelve campo de formulario de texto (

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

valoraciones y comentarios

Si piensas que te ha resultado de provecho este artículo, sería de mucha ayuda si lo compartieras con más programadores de este modo nos ayudas a difundir esta información.

---

---

Utiliza Nuestro Buscador