[Flutter] TextField 높이 조절하기

Flutter에서 TextField 위젯을 사용할 때 height 속성이 직접 제공되지 않습니다. 이번 글에서는 TextField의 높이를 조절하는 다양한 방법을 알아보겠습니다.

 

 

1. TextField의 decoration 속성 활용하기

Flutter에서 TextField의 높이는 decoration 속성의 contentPadding을 조절하여 변경할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextField 높이 조절')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextField(
            decoration: InputDecoration(
              contentPadding: EdgeInsets.symmetric(
                vertical: 20.0,
                horizontal: 10.0,
              ),
              border: OutlineInputBorder(),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서 contentPadding: EdgeInsets.symmetric(vertical: 20.0)를 설정하면 TextField의 높이가 조절됩니다.

 

 

2. maxLines 속성 사용하기

입력할 텍스트의 줄 수에 따라 동적으로 TextField의 높이를 조절하고 싶다면 maxLines 속성을 사용할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextField 높이 조절')), 
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextField(
            maxLines: 3,
            decoration: InputDecoration(border: OutlineInputBorder()),
          ),
        ),
      ),
    );
  }
}

위 코드에서 maxLines: 3을 설정하면 입력 필드가 세 줄까지 확장되며 높이도 자동으로 조정됩니다.

 

 

3. minLines + maxLines로 동적 조절

입력하는 텍스트의 양에 따라 자동으로 크기를 조절하고 싶다면 minLines와 maxLines 속성을 함께 사용할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextField 높이 조절')), 
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextField(
            minLines: 1,
            maxLines: 5,
            decoration: InputDecoration(border: OutlineInputBorder()),
          ),
        ),
      ),
    );
  }
}

이렇게 하면 최소 1줄, 최대 5줄까지 입력할 수 있도록 높이가 자동으로 조절됩니다.

 

 

4. style 속성의 fontSize 활용하기

텍스트 크기가 변경되면 TextField의 높이도 영향을 받을 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextField 높이 조절')), 
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextField(
            style: TextStyle(fontSize: 20.0),
            decoration: InputDecoration(border: OutlineInputBorder()),
          ),
        ),
      ),
    );
  }
}

기본적으로 TextField는 입력된 텍스트 크기에 맞춰 높이를 자동 조절합니다. 따라서 폰트 크기를 조절하면 자연스럽게 높이도 달라질 수 있습니다.