Flutter/Widget 썸네일형 리스트형 [Widget] LayoutBuilder LayoutBuilder Example class Responsive extends StatelessWidget { final Widget? mobile; final Widget desktop; const Responsive({Key? key, required this.desktop, this.mobile,}) : super(key: key); static bool isMobile() => ScreenUtil().screenWidth ScreenUtil().screenWidth >= 700 && ScreenUtil().screenWidth ScreenUtil().screenWi.. 더보기 [Widget] Material Widget Material Widget은 property가 없는 여러 widget에 material widget이 가진 property를 넘겨줄 수 있다. Clipping Material widget은 shape, type, borderRadius 와 같은 property를 주입할 수 있다. Clipper 1. ClipOval 2. ClipRect 3. ClipRRect 4. ClipPath Default는 cilpBehavior는 Clip.none 이다. Clip.none VS Clip.none (x) Elevation Elevation을 줄 수도 있다! 투명도를 줄 수 있다! Ink Effect Material shows lnk effects implemented by InkFeatures like inkSpl.. 더보기 [Widget] MaterialStateProperty of Button ✔️ State 에 따라서 Button의 state에 맞는 시각적인 요소를 지정할 수 있다. Material Design에서 지정하고 있는 버튼의 상태 - enabled : 상호작용 가능한 버튼 상태 - pressed : 사용자가 탭 했을 때 - hover : 사용자가 마우스 커서를 상호작용 가능한 버튼 위에 올려두었을 때 - focus : 사용자가 키보드나 음성과 같은 입력 방법을 사용해서 강조표시한 상태 - disable : 상호작용 불가한 버튼 상태 State별로 버튼 시각적 요소 지정 1) MaterialStateProperty.resolvewith : State 별로 상태 변화를 지정할 수 있다. (개인적인 코드 방식) ElevatedButton( style: ButtonStyle( backgr.. 더보기 [Widget] Is there a way to load async data on initState method? 예를 들어 API를 처음 시작할 때 불러온다든가 (물론.. 함수로 빼주면 되긴하지만..) 할 때에 initState 안에서 async, await를 사용하고 싶을 때가 있을 것이다. 하지만 initState에는 async, await를 사용할 수 없기 때문에 다른 방법을 찾아야 하는데 그것이 가능하도록 하는 방법을 이번 주제로 다루려고 한다. 첫 번째 방법! : WidgetsBinding.instance.addPostFrameCallback() + Future 함수 코드로 살펴보자! (위에서도 언급했지만 함수를 따로 만들어서 할 수 있는 방법이 있다!) 아래에서는 setState를 사용하기 때문에 WidgetsBinding.instance.addPostFrameCallback 를 붙여주었다. 왜냐하면 b.. 더보기 [Widget] CheckBox CheckBox Widget 1. Property 정리 shape : CheckBox의 Shape을 지정할 수 있다. shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(3), ), side: CheckBox의 border 지정할 수 있다. side: const BorderSide(color: Colors.black,), Example Checkbox( value: true, onChanged: (_) {}, // Background color of your checkbox if selected activeColor: Colors.deepOrange, // Color of your check mark checkColor: Colors.b.. 더보기 [Widget] TextField, TextFormField (validate) 우선 TextField 와 TextFormField의 다른 점은 바로 FormKey를 사용해서 validate를 check 할 수 있냐 없냐이다. 코드를 통해 어떻게 Validate를 처리하는지 알아보자 어떻게 validate를 처리할까? 필요한건 우선 - GlobalKey key - Form widget - validate property @override Widget build(BuildContext context) { return DefaultAppbarLayout( child: Form( key: this.formKey, child: Padding( padding: EdgeInsets.all(16.0), child: Column( children: [ renderTextFormField( labe.. 더보기 [Widget] WillPopScope 휴대폰을 하다보면 Back Key or Button을 눌러서 이전 페이지로 넘어갈 때가 많은데, Flutter에서는 해당 Action을 WillPopScope를 사용해서 막는다. 아래 예제를 보며 살펴보자 // Scaffold를 WillPopScope로 감싸는 것 import 'package:flutter/material.dart'; void main() { runApp( MaterialApp(home: MyApp()) ); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State { String _msg = 'Welcome to Wil.. 더보기 [Widget] FocusNode FocusNode 파헤치기 🐋 TextField에 Text를 입력하고자 할 때 일반적으로는 모든 TextField를 눌러서 포커싱이 되면 Text 입력이 가능하지만FocusNode는 자동으로 포커싱을 넘겨주거나 해주는 기능이다. class _MyCustomFormState extends State { // 포커스노트 선언 FocusNode myFocusNode; // 폼이 생성될 때 호출 @override void initState() { super.initState(); // myFocusNode에 포커스 인스턴스 저장. myFocusNode = FocusNode(); } // 폼이 삭제될 때 호출 @override void dispose() { // 폼이 삭제되면 myFocusNode도 삭제됨 myF.. 더보기 이전 1 2 다음
