Set width size of TextFormField with prefix to match normal TextFormField-CodePudding

is there anyway to make TextFormField with prefix have same size with normal TextFormField? Tried to wrap it with container, but I'm afraid if using different device with different width will affect it. Thank you.

This is my code

              TextFormField(
                textInputAction: TextInputAction.next,
                controller: namaField,
                focusNode: _namaFocus,
                autovalidateMode: AutovalidateMode.always,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  icon: Icon(Icons.person),
                  labelText: 'Nama Lengkap',
                ),
                validator: (String? value) {
                  if (value == null || value.isEmpty) {
                    return 'Mohon Isikan Data';
                  }
                  return null;
                },
              ),
              SizedBox(height: 5),
              TextFormField(
                textInputAction: TextInputAction.done,
                autovalidateMode: AutovalidateMode.always,
                keyboardType: TextInputType.phone,
                controller: noHpField,
                focusNode: _noHpFocus,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  isDense: true,
                  prefixIcon: Padding(
                    padding: EdgeInsets.fromLTRB(4, 6, 4, 7),
                    child: Text(" 62",
                        style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold)),
                  ),
                  prefixIconConstraints:
                  BoxConstraints(minWidth: 0, minHeight: 0),
                  icon: Icon(Icons.phone_android),
                  labelText: 'No HP',
                ),
                validator: (String? value) {
                  if (value == null || value.isEmpty) {
                    return 'Mohon Isikan Data';
                  }
                  return null;
                },
              ),

CodePudding user response：

Remove isDense: true.

Full Code :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Welcome Flutter'),
        ),
        body: new SafeArea(
            top: true,
            bottom: true,
            child: Column(
              children: [
                SizedBox(
                  height: 20,
                ),
                TextFormField(
                  textInputAction: TextInputAction.next,
                  controller: namaField,
                  focusNode: _namaFocus,
                  autovalidateMode: AutovalidateMode.always,
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    icon: Icon(Icons.person),
                    labelText: 'Nama Lengkap',
                  ),
                  validator: (String? value) {
                    if (value == null || value.isEmpty) {
                      return 'Mohon Isikan Data';
                    }
                    return null;
                  },
                ),
                SizedBox(height: 5),
                TextFormField(
                  textInputAction: TextInputAction.done,
                  autovalidateMode: AutovalidateMode.always,
                  keyboardType: TextInputType.phone,
                  controller: noHpField,
                  focusNode: _noHpFocus,
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    // isDense: true, <-- Comment this.
                    prefixIcon: Padding(
                      padding: EdgeInsets.fromLTRB(4, 6, 4, 7),
                      child: Text(" 62", style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
                    ),
                    prefixIconConstraints: BoxConstraints(minWidth: 0, minHeight: 0),
                    icon: Icon(Icons.phone_android),
                    labelText: 'No HP',
                  ),
                  validator: (String? value) {
                    if (value == null || value.isEmpty) {
                      return 'Mohon Isikan Data';
                    }
                    return null;
                  },
                ),
              ],
            )));
  }
}

CodePudding user response：

Try this:

Container(
width:MediaQuery.of(context).size.width*0.90,
 child:  TextFormField(
                textInputAction: TextInputAction.next,
                controller: namaField,
                focusNode: _namaFocus,
                autovalidateMode: AutovalidateMode.always,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  icon: Icon(Icons.person),
                  labelText: 'Nama Lengkap',
                ),
                validator: (String? value) {
                  if (value == null || value.isEmpty) {
                    return 'Mohon Isikan Data';
                  }
                  return null;
                },
              ),),