Add label to a Container in Flutter

Asked

Viewed 990 times

0

I would like to add a label like the image below on the edge of a container, the code of my container is this:

new Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5.0),
            border: Border.all(color: Colors.black26))

Any idea how I can do that?

Label

2 answers

0


The Solution I found was to add a InputDecorator, thus being able to style any object inside the container as is the textField of my App. Inside the Child of InputDecorator add the widget which I will use, and then add to Decoration of InputDecorator the edge and the label I want, leaving it just the way I wanted it.

        child: Container(
      color: Colors.white,
      child: InputDecorator(
          child: DropdownButtonHideUnderline(
            child: new DropdownButton(
              value: itemSelected,
              onChanged: (String newValue) {
                setState(() {});
              },
              hint: new Text("Selecione"),
              isDense: true,
              items: <String>['  ', 'Sim', 'Não']
                    .map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
          );
          })
              .toList(),
            ),
          ),
          decoration: new InputDecoration(
              contentPadding: const EdgeInsets.all(11.0),
              labelText:(this.label != null ? this.label : ""),
              enabledBorder:  OutlineInputBorder(
                borderSide: BorderSide(
                    color: borderColor()
                ),),
              border: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.black)))),
    ));

-1

Voce can disable the border simply by using enabledBorder: Inputborder.None inside the Inputdecoration ex:

TextFormField(
 decoration: InputDecoration(
 labelText: 'Email',
 enabledBorder: InputBorder.none,// isso que vc quer para desativar a borda
 labelStyle: TextStyle(
 color: Colors.white,
 fontSize: 15.0,
  ),
 ),
),

Browser other questions tagged

You are not signed in. Login or sign up in order to post.