michael
michael

Reputation: 41

How I do the TextFormField in flutter? Like this

TextFormField with labelText

Don't worry about the icon, but the important is the label inside outline border when the TextFormField is focused.

I didn't want it like that:

other

Upvotes: 0

Views: 340

Answers (2)

Diwyanshu Rai sharma
Diwyanshu Rai sharma

Reputation: 121

You can use like this:

  Form(
        key: _formKey,
        child: ListView(
          //physics: const NeverScrollableScrollPhysics(),
          children: <Widget>[
            Center(
              child: Text(
                'Token',
                style: TextStyle(fontSize: 36, fontWeight: FontWeight.w300),
              ),
            ),
            Container(
              height: 40,
            ),
            TextFormField(
              style: textStyle,
              controller: authControllername,
              // ignore: missing_return
              validator: (String value) {
                if (value.isEmpty) {
                  return 'Please enter name';
                }
              },
              decoration: InputDecoration(
                  labelText: 'Name',
                  hintText: 'Enter name',
                  labelStyle: textStyle,
                  errorStyle: TextStyle(color: Colors.red, fontSize: 14.0),
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5.0))),
            ),
            Container(
              height: 20,
            ),
            TextFormField(
              style: textStyle,
              controller: authController,
              validator: (String value) {
                if (value.isEmpty) {
                  return 'Please enter OAuth token';
                }
              },
              decoration: InputDecoration(
                  labelText: 'OAuth token',
                  hintText: 'Enter OAuth token',
                  labelStyle: textStyle,
                  errorStyle: TextStyle(color: Colors.red, fontSize: 14.0),
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5.0))),
            ),

          ],
        ),
      ),

Upvotes: 0

Uroš
Uroš

Reputation: 1658

If I understood your question, you want something like this:

gif-example

In that case you achieve this by using Container with decoration and a Column that has Text and of course TextFromField, like so:

  Container(
   padding: EdgeInsets.all(8),
   decoration: new BoxDecoration(
     border: new Border.all(
        color: Colors.black,
        width: 1.0,
        style: BorderStyle.solid
      ),
     borderRadius: BorderRadius.circular(8.0),
   ),
   child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text("Label", style: TextStyle(color: Colors.black54),),
        TextFormField(
          decoration: const InputDecoration(
            suffixIcon: Icon(Icons.remove_red_eye),
            hintText: "Input text",
            // if you want to remove bottom border that changes color when field gains focus
            // then uncomment the line bellow
            // border: InputBorder.none, 
          )
        )
      ]
     )
  )

Not the shortest solution... but it gets the job done.

Upvotes: 2

Related Questions