반응형
현재 3번에 해당하는 알럿창을 만들었다.
알게된 것
1. 알럿창은 기본으로 Padding이 들어가 있다... 그래서 농부코딩님의 상세설계서대로 만드려면 Container로 작업을 해야 할 듯 하다.
하지만 그대로 진행하기로 했다..(귀찮으니까..!)
2.validator 유효성 검사를 진행 할 때 나오는 메세지가 TextFromField의 높이에 포함이 된다...... 그래서 텍스트폼 필드의 각 칸이 들쭉날쭉해보이는 경우가 생긴다. 꽤 까다롭네 이친구?
3. TextFormField 의 크기를 키우고 싶다면 maxLines 파라미터를 사용하면 된다..!!
import 'package:flutter/material.dart';
class Add_todo_alert extends StatelessWidget {
final controller_Time;
final controller_Title;
final controller_desc;
final String hintText;
final VoidCallback onSave;
final VoidCallback onCancel;
final GlobalKey formkey;
const Add_todo_alert(
{Key? key,
required this.hintText,
required this.onSave,
required this.onCancel,
required this.formkey,
required this.controller_Title,
required this.controller_desc,
required this.controller_Time})
: super(key: key);
@override
Widget build(BuildContext context) {
String ms= "제목을 입력하세요";
return AlertDialog(
content: SingleChildScrollView(
child: Form(
key: formkey,
child: Container(
width: 300,
height: 450,
child: Column(
children: [
Container(
width: double.infinity,
height: 80,
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.arrow_back,
color: Colors.white,
size: 25,
),
SizedBox(
width: 50,
),
Text(
"새로운 할 일",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white),
),
SizedBox(
width: 50,
),
],
),
),
SizedBox(
height: 10,
),
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(' 일자'),
SizedBox(
width: 40,
),
SizedBox(
width: 150,
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(),
),
controller: controller_Time,
),
),
],
),
SizedBox(height: 20,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.star,
size: 10,
color: Colors.red,
),
Text('제목'),
],
),
SizedBox(
width: 30,
),
SizedBox(height: 10,),
SizedBox(
width: 150,
child: TextFormField(
controller: controller_Title,
decoration: InputDecoration(
border: OutlineInputBorder(),
),
autovalidateMode: AutovalidateMode.always,
validator: (val) {
if (val == null || val.isEmpty) {
return "제목을 입력하세요";
}
return null;
},
)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(' 내용'),
SizedBox(
width: 40,
),
Container(
width: 150,
padding: EdgeInsets.symmetric(vertical: 8),
child: TextFormField(
controller: controller_desc,
maxLines: 5,
decoration: InputDecoration(
contentPadding: EdgeInsets.only(left: 8, top: 30),
border: OutlineInputBorder(),
),
),
),
],
),
],
),
],
),
),
),
),
actions: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: onSave,
child: Text("확인"),
),
ElevatedButton(
onPressed: onCancel,
child: Text("취소"),
),
],
)
],
);
}
}
반응형
'완성하지 못한 프로젝트 > 프로젝트 4 : 농부코딩님 Todo' 카테고리의 다른 글
농부코딩님 Todo 진행상황 5 : 체크 박스 누르면 완료 Page로 이동 (0) | 2023.02.15 |
---|---|
농부코딩님 TODO 진행상황 4 : 추가, 삭제 기능 만들기 (0) | 2023.02.13 |
농부코딩님 Todo어플 : 진행 2 - 탭뷰 (0) | 2023.02.08 |
농부코딩님 Todo 어플 : 진행 1 - 상세설계서 정리 (0) | 2023.02.08 |