본문 바로가기

프로그래밍/Flutter38

[Flutter] TextFormField 정리 final GlobalKey _formKey = GlobalKey(); FormKey를 선언하여 사용 영역 widget에 Form을 감싸고 key 속성으로 추가를 해둔다. 이러한 처리를 하는 이유는 나중에 전체 텍스트 필드에 대하여 error가 있는지 판단하기 위함이다. formKey쪽에서 이를 인식해서 쉽게 이용할 수 있다. 입력할 때 커서 색상, HighLight 색상을 바꾸려면 MaterialApp의 테마에서 해당 속성을 처리하면 된다. textSelectionTheme: const TextSelectionThemeData( cursorColor: Color.fromARGB(255, 255, 0, 255), selectionColor: Color.fromARGB(255, 185, 185, 185),.. 2022. 4. 6.
[Flutter] 스크린 하단에 Widget 배치 찾아보면 Column 안에 넣어서 정렬을 해가지고 .. 밑에 배치를 시키는 그런 방법이 많이 나오는데 내가 발견한 쉬운 방법은 Expanded 위젯을 사용하는 방법이다. Column( children: [ const Expanded( child: Center(child: null), ), // 위젯 자리 const Padding(padding: EdgeInsets.only(bottom: 32),), ], ) Column의 children에 하나씩 배치를 하는데 가장 하단까지 margin을 주기에는 무리가 있다. (기기마다 스크린 크기가 달라서 하드코딩으로는 문제가 생길 것이다.) 방법을 찾아보니 Expanded를 이용하여 자리를 차지하도록 하고 맨 밑에 원하는 만큼의 Padding을 주는 방법이 있어서 .. 2022. 4. 3.
[Flutter] 둥근 버튼 만들기 SizedBox( width: 80, height: 80, child: Container( decoration: BoxDecoration( border: Border.all( color: Colors.grey, width: 4), shape: BoxShape.circle, ), child: MaterialButton( onPressed: () { }, color: Colors.grey, child: Text("토익", style: const TextStyle(color: Colors.black, fontSize: 18), ), padding: const EdgeInsets.all(8), shape: const CircleBorder(), ) )​ Border 효과를 주고 싶다면 Container를 사용하.. 2022. 4. 3.
[Flutter] List<TextSpan> in ChangeNotifier ChangeNotifier 내부에서 데이터를 로드하고 List에 데이터를 채우는 형태를 가지고 있었는데 해당 데이터를 채우고 NotifyListeners()를 호출해줘도 갱신이 안 되었다. 값은 이미 바뀌어 있는 상태 RichText( text: TextSpan( style: const TextStyle( color: Colors.white, fontSize: 18, ), children: notifier.descDataList, // not working ), ) children: notifier.isQuizNotCorrect() ? notifier.descDataList : null, 이렇게 바꿔주니까 인식이 되기 시작한다. LiveData 개념에서도 특정 Observable 상태인 데이터가 바뀌어야.. 2022. 4. 2.
[Flutter] RichText 안드로이드에서 여러 텍스트들 사이에서 원하는 Style을 적용하고 싶은 경우에 Span을 사용한다. Flutter에서 이러한 처리를 하기 위해 RichText 위젯을 사용하는데 사용법은 이렇다. RichText( text: TextSpan( style: const TextStyle( color: Colors.white, fontSize: 18, ), children: [ const TextSpan(text: "정답은 "), TextSpan( text: "사과", style: const TextStyle( color: Colors.yellow, fontWeight: FontWeight.bold)), const TextSpan(text: "에요."), ], ); RichText로 감싸고 TextSpan을 넣.. 2022. 4. 2.
[Flutter] 같은 행에 Widget 정렬하기 처음에 접근한 방식은 Row 위젯에 자식 위젯을 두고 적절하게 Center위젯으로 감싸면 될 거라고 생각했는데 안 된다. Row의 MainAxisAlignment를 center로 바꾸면 처리가 되기는 하는데 각 위젯마다 처리가 안 된다. 문제의 코드 Row( children: [ SizedBox( width: vocaBottomSheetLoginIconSize, height: vocaBottomSheetLoginIconSize, child: image), Center( child: Text( strText, style: const TextStyle( fontSize: textSize16, color: Colors.black, fontWeight: FontWeight.bold), ), ), ], ), 원하.. 2022. 3. 31.
[Flutter] BottomSheet 크기 조정 바텀 시트의 최대 사이즈는 기본적으로 스크린 사이즈의 절반으로 되어 있는데 동적으로 바꾸고 싶다면 showModalBottomSheet 부분을 다음과 같이 교체해야 한다. showModalBottomSheet( isScrollControlled: true, context: context, builder: (BuildContext bc) { return Wrap( children: [...] ) } ) 2022. 3. 31.
[Flutter] Null-Safety https://dart.dev/null-safety Dart Null-safety ​ Null-safety 원칙 1. 기본적으로 Null이 될 수 없으나 명시적으로 사용할 수 있다. 2. 점진적으로 적용할 수 있는 부분이다. 3. 충분히 타당하다. 한번 null이 아닌 객체는 절대 null값을 가지지 않기 때문에 컴파일 최적화가 가능하다. 더 작고 빠른 실행이 가능해진다. ​ https://dart.dev/codelabs/null-safety ​ 코틀린과 비슷한 형태로 Null-safety 규칙이 있다. 1. 타입에 ?를 붙이면 Nullable로 전환된다 2. assertion operator !를 사용하면 해당 객체가 Null이 아님을 명시할 수 있다. ​ int getLength(String? str.. 2022. 3. 27.

티스토리툴바