[Flutter/Project](Instagram Clone) comment 입력창 레이아웃

 

텍스트가 없을 때 Post 버튼 비활성화, 총 5줄까지 창이 늘어남. 스크롤 가능.

---

---

소스코드 및 pubspec.yaml

// screens/comments_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/constants/auth_input_decor.dart';
import 'package:flutter_project_IJ/constants/common_size.dart';
import 'package:flutter_project_IJ/widgets/rounded_avatar.dart';

class CommentsScreen extends StatefulWidget {
  @override
  _CommentsScreenState createState() => _CommentsScreenState();
}

class _CommentsScreenState extends State<CommentsScreen> {
  TextEditingController _textEditingController = TextEditingController();
  GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  
  // Post 버튼 활성화/비활성화
  bool _btnEnable = false;

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _formKey,
        onChanged: () {
          setState(() {
            // Form의 상태가 변경될 때마다 _btnEnable 업데이트
            _btnEnable = _formKey.currentState.validate();
          });
        },
        child: Column(
          children: [
            Expanded(
              child: Container(
                color: Colors.amber,
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: common_xxs_gap),
              child: Row(
                // Row 하단 정렬
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Padding(
                    padding: EdgeInsets.all(common_xxs_gap),
                    child: RoundedAvatar(
                      size: 45,
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(
                          right: common_xs_gap,
                          top: common_xxs_gap,
                          bottom: common_xxs_gap),
                      child: TextFormField(
                        controller: _textEditingController,
                        minLines: 1,
                        maxLines: 5,
                        showCursor: true,
                        autofocus: true,
                        cursorColor: Colors.blueAccent,
                        // 값 검사. 비어있으면 에러 메시지 표시
                        validator: (text) => text.isNotEmpty ? null : '',
                        decoration: InputDecoration(
                          focusedErrorBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey[300]),
                            borderRadius: BorderRadius.circular(20),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey[300]),
                            borderRadius: BorderRadius.circular(20),
                          ),
                          // 에러 메시지 제거
                          errorStyle: TextStyle(fontSize: 0, height: 0),
                          hintText: 'Add a comment...',
                          isDense: true /* 가능한 작은 사이즈 */,
                          contentPadding: EdgeInsets.all(10) /* 내부 공백 */,
                          // hintText: 'Comment..',
                          hintStyle: TextStyle(color: Colors.grey[400]),
                          // 텍스트필드 내부 버튼
                          suffixIcon: TextButton(
                            // 받은 값이 true일 경우 버튼 활성화
                            onPressed: _btnEnable ? () {} : null,
                            style: TextButton.styleFrom(primary: Colors.blue),
                            child: Text('Post'),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}