Study Record

✍ FutureBuilder Widget 네트워크 통신이 필요한 작업 등 비동기로 작업한 이후 UI를 업데이트를 해야 할 경우가 있다면 유용한 위젯이다. FutureBuilder({ Key? key, Future? future, T? initialData, required Widget Function(BuildContext, AsyncSnapshot) builder, }) future에 비동기로 할 작업을 정의하고 builder에 future에 작업이 끝나기 전 보여줄 Widet , 끝난 후 보여줄 Widget을 정의하면 된다. 데이터 타입 T는 비동기 작업 후 반환할 데이터 타입으로 initialData는 future 작업이 끝나기 전 초기 데이터를 정의할 수 있다. 예를 들어, 코드가 다음과 같으면,..

✍ AlterDialog Material Design의 AlterDialog이다. ShowDialog()로 AlterDialog를 띄울 수 있다. 제목(title)과 내용(content), 하단 버튼(actions)을 만들 수 있다. showDialog( context: context, builder: (context) { return AlertDialog( title: const Text("AlertDialog", style: TextStyle(color: Colors.red)), content: Text("다이얼로그 테스트 입니다.", style: TextStyle(color: Colors.black)), actions: [ TextButton( onPressed: () {Navigator.of(co..

✍ Stack Class 자식 위젯들을 중복으로 겹쳐서 위치시킬 수 있다. 별도로 방향을 정해주지 않으면 상단 왼쪽(topStart)에 위젯들이 겹쳐 정렬된다. Stack({ Key? key, AlignmentGeometry alignment = AlignmentDirectional.topStart, TextDirection? textDirection, StackFit fit = StackFit.loose, Clip clipBehavior = Clip.hardEdge, List children = const [], }) ※ alignment import 'package:flutter/material.dart'; void main() { runApp(MaterialApp(home: HomeScreen())..

✍ video_picker https://pub.dev/packages/video_player video_player | Flutter Package Flutter plugin for displaying inline video with other Flutter widgets on Android, iOS, and web. pub.dev 1. 초기 세팅 flutter pub add video_player 터미널에서 위와 같은 명령어를 실행하거나 직접 pubspec.yaml 파일에 video_player: ^2.5.1 을 입력한다. 그런 다음 [Pub get] 버튼을 누르면 초기 세팅이 완료된다. 2. 사용법 비디오를 재생하기 위해서는 VideoPlayerController 와 VideoPlayer()가 필요..

✍ Container 일반적인 그림 그리기, 위치 지정 및 크기 조정을 편리하게 해주는 위젯이다. Container({ Key? key, AlignmentGeometry? alignment, EdgeInsetsGeometry? padding, Color? color, Decoration? decoration, Decoration? foregroundDecoration, double? width, double? height, BoxConstraints? constraints, EdgeInsetsGeometry? margin, Matrix4? transform, AlignmentGeometry? transformAlignment, Widget? child, Clip clipBehavior = Clip.non..

✍ Slider Widget 사용자가 인디케이터를 움직임으로써 값을 설정할 수 있는 위젯이다. import 'package:flutterd/material.art'; Slider({ Key? key, required double value, required void Function(double)? onChanged, void Function(double)? onChangeStart, void Function(double)? onChangeEnd, double min = 0.0, double max = 1.0, int? divisions, String? label, Color? activeColor, Color? inactiveColor, Color? thumbColor, MouseCursor? mouse..

✍ padding widget padding 위젯은 child 위젯의 겉부분에 빈 공간을 설정할 수 있다. Padding({ Key? key, required EdgeInsetsGeometry padding, Widget? child, }) padding 인자 값 설정 방법 1. EdgeInsets.all(double value) Padding( padding: EdgeInsets.all(16.0); child: Container() ) child 위젯의 전 방향(왼쪽, 오른쪽, 위, 아래) 에 16.0 만큼 padding 을 준다. 2. EdgetInsets.only({double left, double right, double top, double, bottom }) Padding( padding: ..

🎁 CupertinoDatePicker IOS 에서 주로 사용하는 날짜 선택 다이얼로그로 Cupertino 가 IOS 에서 자주 사용되는 이름이니 이 단어가 붙으면 IOS 와 관련된 기능이라고 생각해도 된다. 반대로 Material 은 AOS 에서 자주 사용되는 이름이다. CupertinoDatePicker({ Key? key, CupertinoDatePickerMode mode = CupertinoDatePickerMode.dateAndTime, required void Function(DateTime) onDateTimeChanged, DateTime? initialDateTime, DateTime? minimumDate, DateTime? maximumDate, int minimumYear = 1,..