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.

enter image description here

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;
                },
              ),


Solution 1: Vishal_VE

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;
                },
              ),),


Solution 2: Yashraj

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;
                  },
                ),
              ],
            )));
  }
}