1. overflow에러(SingleChildScrollView)
왼쪽 사진은 화면의 크기보다 위젯이 더 큰 경우 발생하는 overflow 에러이다.
이 경우에는 사용하고자 하는 위젯의 최상위 Class를 SingleChildScrollView로 감싸주면 된다. 하나뿐인 자식이 너무 커서 화면에 다 안나오고 삐져나간다던지 할 때 스크롤을 해서 자식을 다 볼 수 있도록 해준다.
그렇게 되면 password 인풋을 눌렀을 때 왼쪽같은 오류가 났었다가 이제는 오른쪽처럼 스크롤이 가능하게 된다. 그래서 키보드에 의해서 인풋창이 가려지지 않게 된다.
2. 키보드 밖 클릭시(GestureDetector)
이와 관련된 강의를 여러번 봤지만 안 익혀져서 다시 정리한다.
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
//FocusManager.instance.primaryFocus?.unfocus();
FocusScope.of(context).unfocus();
},
child: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.all(50),
child: TextField(
decoration: InputDecoration(labelText: 'Input1'),
onChanged: (text) {
setState(() {
_fieldText1 = text;
});
},
)),
...
]
)
)
);
- GestureDetector를 최상위로 두어 나머지 태그들을 감싸준다.
- onTap이벤트를 두어 키보드 밖 클릭시 키보드가 내려가게 설정한다.
💫 FocusScope.of(context).unfocus();
3. decoration
decoration이 태그에 따라 이름이 달라지게 된다.
- textfield의 경우 : inputdecoration
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(0)),
contentPadding: EdgeInsets.all(10.0),
hintText: '설명을 적어주세요.'),
),
- container의 경우 : boxdecoration
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 5,
),
4. Align
: 위젯을 원하는 방향으로 정리하고 싶을 때 Align 위젯으로 가능하다.
Align(
alignment: Alignment.bottomCenter, //정렬하고자하는 위치 설정
child:Container(
//자식 위젯 코드 생략
)
)
Align에 Alignment에 사용하여 위치를 지정해줄 수 있다. 여기에는 두가지 방법이 존재한다.
1) 값 직접 설정
Alignment()를 사용하여 값을 지정할 때는 아래 그래프에 따라 위치를 조정하면 된다. 소수점 단위로 설정이 가능하다. 표현 할 수 있는 범위는 x 와 y좌표 모두 -1.0 ~ 1.0 사이이다.
이렇게 일일히 값을 지정해준다면 가독성이 떨어질 뿐만 아니라 x와 y좌표의 위치 또한 일반적인 그래프와 다르기 때문에 혼동을 야기할 수 있다.
2) 상수 이름으로 지정
이렇게 상수 이름을 통해 지정할 경우, 위치를 미세하게 조정하는 것은 힘들지만 위치를 이름으로 명확히 파악 가능해진다는 장점이 있다.
상수 이름 상수 설명
| bottomLeft | Alignment(-1.0, 1.0) | 하단 왼쪽 |
| bottomCenter | Alignment(0.0, 1.0) | 하단 중앙 |
| bottomRight | Alignment(1.0, 1.0) | 하단 오른쪽 |
| centerLeft | Alignment(-1.0, 0.0) | 중단 왼쪽 |
| center | Alignment(0.0, 0.0) | 중단 중앙 |
| centerRight | Alignment(1.0, 0.0) | 중단 오른쪽 |
| topLeft | Alignment(-1.0, -1.0) | 상단 왼쪽 |
| topCenter | Alignment(0.0, -1.0) | 상단 중앙 |
| topRight | Alignment(1.0, -1.0) | 상단 오른쪽 |
추가) appbar 가운데 정렬
이는 추가 안해도 되긴 하지만, 까먹지 않기 위해 추가한다. 아래의 코드는 appbar에 글씨를 가운데 정렬해주는 코드이다.
centerTitle: true
5. datetime객체 format 변경
이전에 언어와 같은 줄 알고 format형식을 써서 적용할려고 했는데, 계속 오류가 나서 찾아보니 flutter의 datetime format이 달라 정리한다.
1) intl적용
플러터나 dart에서는 Datetime객체의 형태를 변형하는 것이 없어, 외부 패키지를 끌고 와야한다.
intl package를 써야 한다. 이는 홈페이지를 붙여놨다. 이를 들어가서 dependencies 복사를 하고, pubspec.yaml에 dependencies에 붙여넣기를 해서 하면 적용이 된다.
dependencies:
intl: ^0.18.0
그리고 쓰고자 하는 코드에 임포트해준다.
import 'package:intl/intl.dart';
2) format적용
DateFormat('yyyy년 MM월 dd일').format(day)
6. 데이터 전달
페이지 이동시 데이터를 전달하고자 했다. 그런데 잘 안되서 찾아보니 방안을 찾았다.
1) 페이지 이동과 데이터 전달
Navigator.push(context,
MaterialPageRoute(
builder: (context) => SecondPage(day)
)
);
이렇게 페이지 이동시에 넘겨주는 페이지를 쓰고 ()안에 넘겨주고자 하는 데이터를 넣어준다.
2) 데이터 받기
이 때 고생했던게 statefulWidget과 statelessWidget의 데이터 받는 것이 다르다.
- StatefulWidget : 받을 데이터 앞에 widget을 붙여서 받아야 한다.
- ex) widget.data
- StatelessWidget : 데이터 이름을 써서 받으면 된다.
class TodoAdd extends StatelessWidget {
final DateTime day;
const TodoAdd({super.key, required this.day});
Widget build(BuildContext context) {
final date = DateFormat('yyyy년 MM월 dd일').format(day);
- final변수로 하여 데이터타입과 데이터를 이름을 선언해줘야 한다.
- required this.변수이름을 써줘야 한다.
- 저기서 데이터를 가져와서 자기가 원하는 형식으로 변형하고자 한다면 final로 선언해줘야 한다. 내 경우 다 안되다가 final 변수로 선언해주니 되었다.
🔗 참고
https://dev-yakuza.posstree.com/en/flutter/widget/textfield/
https://flamingotiger.github.io/frontend/flutter/flutter-style/
https://stackoverflow.com/questions/49257641/how-can-i-make-rounded-textfield-in-flutter
https://islet4you.tistory.com/entry/Flutter-AppBar-title-center-로-맞춰주기 → center
https://cyj893.github.io/flutter/Flutter6/
https://papabee.tistory.com/53
https://while1.tistory.com/118
https://flamingotiger.github.io/frontend/flutter/flutter-style/
