How to remove Textfield edge?

Question

I’m making an autocomplete, it works perfectly, but it adds this edge on the input, I already used border.None, enabledBorder: Inputborder.None, among other things and I’m not able to remove. If anyone can help.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appBar(),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Column(
          children: [
            buscando
                ? Expanded(
                    child: Center(
                      child: CircularProgressIndicator(),
                    ),
                  )
                : Expanded(
                    child: ListView.builder(
                      itemCount: _predictions.length,
                      itemBuilder: (_, i) {
                        final Place item = _predictions[i];
                        return ListTile(
                          title: Text(item.description),
                          leading: Icon(Icons.location_on),
                          onTap: () {

                            _futureAlbum = createAlbum(
                            widget.email, widget.password, widget.name, widget.phoneNumber, widget.cnpj_cpf, item.description , context);
                            },
                        );
                      },
                    ),
                  ),
          ],
        ),
      ),
    );
  }
  Widget _appBar() {
    return PreferredSize(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 8),
          child: Column(
            children: [
              Row(
                children: [
                  AddressInput(
                    controller: _destinationController,
                    iconData: Icons.place_sharp,
                    hintText: "Digite o Endereço",
                    onChanged: this._inputOnChanged,
                  ),
                ],
              )
            ],
          ),
        ),
        preferredSize: Size.fromHeight(60),
    );
  }


class AddressInput extends StatelessWidget {
  final IconData iconData;
  final TextEditingController controller;
  final String hintText;
  final Function onTap;
  final bool enabled;
  final void Function(String) onChanged;

  const AddressInput({
    Key key,
    this.iconData,
    this.controller,
    this.hintText,
    this.onTap,
    this.enabled,
    this.onChanged,
  }) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Icon(
          this.iconData,
          size: 18,
          color: Colors.black,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          child: Container(
            height: 35.0,
            width: MediaQuery.of(context).size.width / 1.4,
            alignment: Alignment.center,
            padding: EdgeInsets.only(left: 10.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5.0),
              color: Colors.grey[100],
            ),
            child: TextField(
              controller: controller,
              onChanged: onChanged,
              onTap: onTap,
              enabled: enabled,
              decoration: InputDecoration.collapsed(
                hintText: hintText,
              ),
            ),
          ),
        )
      ],
    );
  }
}

Answer 1

You should post a full code that’s easy to pick up and run by other people, so they can test and help you with the problem. Because of that, I haven’t tested your solution.

But to remove the edges of a TextField just use the property border with InputBorder.none.

TextField(
  controller: controller,
  onChanged: onChanged,
  onTap: onTap,
  enabled: enabled,
  decoration: InputDecoration(
    hintText: hintText,
    border: InputBorder.none,
  ),
),