Flutter/04 Widgets (17) 썸네일형 리스트형 [Flutter] Widgets - FormBuilder 3 이번 카테고리는 form 관련 위젯인 FormBuilder 에 대해서 알아보겠습니다. 라디오버튼, 체크박스에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - Release 05_radio&checkBox · mike-bskim/flutter_form_builder_test · GitHub Release 05_radio&checkBox · mike-bskim/flutter_form_builder_test github.com 화면은 아래와 같습니다. main.dart 에서 추가된 부분만 표시하겠습니다. 전체 소스는 상단의 "소스코드 위치"를 참고하시기 바랍니다. FormBuilderRadioGroup( name: 'urgent', orienta.. [Flutter] Widgets - FormBuilder 2 이번 카테고리는 form 관련 위젯인 FormBuilder 에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - Release 04_dropdown&TypeAhead&TextField · mike-bskim/flutter_form_builder_test · GitHub Release 04_dropdown&TypeAhead&TextField · mike-bskim/flutter_form_builder_test github.com 화면은 아래와 같습니다. 관련 패키지들 flutter_form_builder: ^7.3.1 form_builder_validators: ^8.1.1 flutter_typeahead: ^4.0.0 // FormBuilde.. [Flutter] Widgets - FormBuilder 이번 카테고리는 form 관련 위젯인 FormBuilder 에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - Release 03_start&end_date · mike-bskim/flutter_form_builder_test · GitHub Release 03_start&end_date · mike-bskim/flutter_form_builder_test github.com 화면은 아래와 같습니다. 관련 패키지들 flutter_form_builder: ^7.3.1 form_builder_validators: ^8.1.1 intl: ^0.17.0 main.dart import 'package:flutter/material.dart'; imp.. [Flutter] Widgets - button 각 버튼들의 옵션에 대해서 정리해보았습니다. 버튼별로 자주 사용하는 옵션만 테스트 해봤습니다. TextButton( onPressed: () { // 짧게 누를때 실행 print('text button-onPressed'); }, onLongPress: () { // 길게 누를때 실행 print('text button-onLongPress'); }, child: Text( 'Text button', style: TextStyle( fontSize: 20.0, // "color: Colors.black87" 가 "primary: Colors.white" 보다 우선순위가 높음 color: Colors.black87, ), ), // 버튼의 스타일에 대해서 자주 사용하는 옵션들 style: TextButton.. [Flutter] Widgets - ListView.builder + Card build 할때 ListView.builder 를 사용하는 샘플과 Card 위젯을 동시에 사용하는 간단한 샘플입니다. Card의 옵션으로는 elevation, shape 를 사용한 샘플입니다. @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( centerTitle: true, title: const Text('This is the Kimchi Recipes App'), ), body: ListView.builder( itemBuilder: (context, index){ return buildRecipeCard(recipes[index]); }, itemCount: recipes.length, ) ); } Wid.. [Flutter] Widgets(4) - 재사용 가능한 팝업창 만들기 일반적인 경고창을 만들고 필요한 화면에서 호출가능하고, 재사용 가능하다. 팝업창의 입력값에 따라 다른 처리도 가능하다. class WarningYesNo extends StatelessWidget { final title; final msg; final YesMsg; final NoMsg; WarningYesNo({required this.title, required this.msg, required this.YesMsg, required this.NoMsg}); @override Widget build(BuildContext context) { return AlertDialog( title: Text(title, textAlign: TextAlign.center, ), content: Text(msg,.. [Flutter] Widgets(3) - Custom Widget 이전 블로그에서는 함수처럼 적용한 경우였고, 이번에는 조금 복잡한 경우로 클래스로 적용한 경우의 샘플입니다. 드롭다운 메뉴를 화면마다 동일하게 처리할수도 있고, 클래스로 처리하여 중복코드를 제거할 수도 있다. 기능적인 차이로, 드롭다운 메뉴를 재사용할 수 없는 경우입니다. 다음 블로그에서 재사용 가능한 위젯의 샘플을 만들어 보겠습니다. 아래 소스코드는 Getx 컨드롤러에 대한 설명부분은 생략하였습니다. // dropdown_button_controller.dart // 언어 설정 class DropdownButtonLangType extends StatelessWidget { final DropdownButtonController _dropdownButtonController = Get.put(Dropd.. [Flutter] Widgets(2) - Custom decoration 자주 사용하는 decoration 이 있다면 이런 부분을 함수처럼 처리하여 반복적으로 사용 가능하다. // input_decoration.dart InputDecoration buildInputDecoration({String? label, String? hintText}) { return InputDecoration( fillColor: Colors.white, focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: BorderSide(color: Colors.blue)), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(16.. 이전 1 2 3 다음
