Flutter TextField with Fixed Width Height

In flutter we will set fixed width height of TextField by wrapping it in SizedBox widget. SizedBox allow us to create fixed width height size box in flutter. All we have to do is define width and height to SizedBox and it will automatically applied on it's child.

Flutter TextField with Fixed Width Height

1. Creating 2 Stylesheet for TextField for both normal and focus case.

 static const border = OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
    borderSide: BorderSide(color: Colors.grey, width: 2),
  );

  static const focusBorder = OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(10.0)),
      borderSide: BorderSide(color: Colors.cyan, width: 2));

2. Wrapping up TextField in SizedBox as it's child and give fixed width and height. We are giving width as 350 and height as 44.

Container(
  margin: const EdgeInsets.all(18),
  child: const SizedBox(
	  width: 350,
	  height: 44,
	  child: TextField(
		  decoration: InputDecoration(
		hintText: 'Type Name Here...',
		hintStyle: TextStyle(color: Colors.grey),
		filled: true,
		fillColor: Colors.white,
		contentPadding: EdgeInsets.fromLTRB(10, 4, 4, 10),
		enabledBorder: border,
		focusedBorder: focusBorder,
	  ))))

Source code for main.dart file:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  static const border = OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
    borderSide: BorderSide(color: Colors.grey, width: 2),
  );

  static const focusBorder = OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(10.0)),
      borderSide: BorderSide(color: Colors.cyan, width: 2));
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
      child: Container(
          margin: const EdgeInsets.all(18),
          child: const SizedBox(
              width: 350,
              height: 44,
              child: TextField(
                  decoration: InputDecoration(
                hintText: 'Type Name Here...',
                hintStyle: TextStyle(color: Colors.grey),
                filled: true,
                fillColor: Colors.white,
                contentPadding: EdgeInsets.fromLTRB(10, 4, 4, 10),
                enabledBorder: border,
                focusedBorder: focusBorder,
              )))),
    ))));
  }
}