Flutter Auto-resize TextFields

Here we will learn how to do auto-resize textfields. In general flutter textfields, the text goes up as you type in.

But sometimes for better user experience, you don’t want the text to go up automatically. You want them to be visible.

Being visible, you may edit the text any time.

You should use maxLines to a higher value if you want to auto resize the textfield.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // hide debug banner
      debugShowCheckedModeBanner: false,
      title: 'TextField',
      theme: ThemeData(
        // enable Material 3
        useMaterial3: true,
        primarySwatch: Colors.blue,
      ),
      home: const TextFieldDemo(),
    );
  }
}

class TextFieldDemo extends StatelessWidget {
  const TextFieldDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App Bar'),
      ),
      body: const Padding(
        padding: EdgeInsets.all(30),
        child: Center(
          // implement the text field
            child: TextField(
              minLines: 1,
              maxLines: 10,
              style: TextStyle(fontSize: 20),
              decoration: InputDecoration(border: OutlineInputBorder()),
            )
        ),
      ),
    );
  }
}

If you set maxLines to null, it will expand forever.