How to maintain the height of a TextFormField border when new line is created

user_14210020 0
Viewed 64
Container(
          padding: EdgeInsets.only(bottom: 150),
          margin: EdgeInsets.all(10),
          decoration: BoxDecoration(
              border: Border.all(width: 2, color: Colors.black),
              borderRadius: BorderRadius.all(Radius.circular(10))),
          child: TextFormField(
            keyboardType: TextInputType.multiline,
            maxLines: null,
            style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w600,
                fontFamily: 'Montserrat'),
            decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Task Description...',
                hintStyle: TextStyle(
                    fontFamily: 'Montserrat',
                    fontWeight: FontWeight.w400,
                    fontStyle: FontStyle.italic,
                    fontSize: 20)),
          ),
        )

So, beforehand I made my layout using Container and a Text widget, then I changed it to a TextFormField, but I really wanna stick with my Container's border. But I have this problem when I input a new line, the border/box automatically adjust its height. I don't want that, is there any way to fix this?

Thank you.

textformfield flutter-layout flutter
3 Answers

set you maxLines to null

Container(
      padding: EdgeInsets.only(bottom: 150),
      margin: EdgeInsets.all(10),
      decoration: BoxDecoration(
          border: Border.all(width: 2, color: Colors.black),
          borderRadius: BorderRadius.all(Radius.circular(10))),
      child: TextFormField(
        keyboardType: TextInputType.multiline,
        maxLines: null,
        style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w600,
            fontFamily: 'Montserrat'),
        decoration: InputDecoration(
            border: InputBorder.none,
            hintText: 'Task Description...',
            hintStyle: TextStyle(
                fontFamily: 'Montserrat',
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.italic,
                fontSize: 20)),
      ),
    )
user_124737920

Define both minLines and maxLines to be the same:

enter image description here

Full source code

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.all(10),
        decoration: BoxDecoration(
          border: Border.all(width: 2, color: Colors.black),
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
        child: TextFormField(
          keyboardType: TextInputType.multiline,
          minLines: 5,
          maxLines: 5,
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w600,
            fontFamily: 'Montserrat',
          ),
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: 'Task Description...',
            hintStyle: TextStyle(
              fontFamily: 'Montserrat',
              fontWeight: FontWeight.w400,
              fontStyle: FontStyle.italic,
              fontSize: 20,
            ),
          ),
        ),
      ),
    );
  }
}
user_101185050

try maxLines: null, so no need to give fix size it will automatically adjust size according to content

user_45058550
Related