개발/Flutter
-
[Flutter] FittedBox Widget 에 대해서... (컨텐츠 공간에 맞춤)개발/Flutter 2023. 1. 17. 13:51
FittedBox Widget FittedBox child 컨텐츠를 FittedBox 부모 사이즈에 맞춰줄때 사용하는 간단한 위젯 입니다. 사용전 Row( children: [ Expanded( flex: 1, child: Container( height: 100, color: Colors.green, child: Text('123456789'), ), ), Expanded( flex: 1, child: Container( height: 100, color: Colors.amber, ), ) ], ) 적용 후 Row( children: [ Expanded( flex: 1, child: Container( height: 100, color: Colors.green, child: FittedBox(fit: ..
-
[Flutter] Container Widget 에 대하여 ..개발/Flutter 2023. 1. 13. 14:15
Container 일반적인 페인팅, 위치 지정 , 크기 조정의 위젯들을 결합한 형태의 편리한 위젯입니다. 컨테이너를 부모에 두고 색, 모양, 위치 등 여러 형태로 커스텀하기 좋습니다. Container( margin: EdgeInsets.all(40), padding: EdgeInsets.all(20), decoration: const BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.all(Radius.circular(30))), child: const Text('this is container'), ) 위 예제는 컨테이너 내부에 child로 text가 들어가 있고 text의 배경을 꾸미는 역활을 하고 있습니다. 이와 같이 내부에 widget..
-
[Flutter] GoogleFonts 사용하기 (폰트 변경 하기)개발/Flutter 2023. 1. 12. 15:09
GoogleFonts 기본 시스템 글꼴 외 다양한 폰트를 간편히 사용하고 싶을때 사용해보면 좋을듯합니다. 모든 글꼴을 저장할 필요 없이 1,400개 이상의 글꼴을 사용할 수 있습니다. 우선 pubspec.yaml 에 의존성을 추가 합니다. google_fonts: ^3.0.1 사용법은 간단합니다. Text( 'This is Google Fonts', style: GoogleFonts.amiko(), ) 기존 Text widget의 style 에 추가 합니다. Text( 'This is Google Fonts', style: GoogleFonts.amiko(fontSize: 20, color: Colors.black), ), TextStyle 은 GoogleFonts 내부로 추가 합니다. 그리고, Them..
-
[Flutter] Wrap widget 에 대하여...개발/Flutter 2023. 1. 11. 16:56
Wrap widget Row / Column 과 같이 가로 또는 세로 방향으로 children을 둘수있는 위젯입니다. Wrap( direction: Axis.horizontal, spacing: 10, runSpacing: 10, children: [ Chip( avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('AH')), label: const Text('Hamilton'), ), Chip( avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('ML')), label: const Text('Lafayette'), ), Chip..
-
[Dart/Flutter] Factory 생성자에 대하여개발/Flutter 2023. 1. 10. 13:34
참고 - https://dart.dev/guides/language/language-tour#factory-constructors Factory constructors Use the factory keyword when implementing a constructor that doesn’t always create a new instance of its class. For example, a factory constructor might return an instance from a cache, or it might return an instance of a subtype. Dart 가이드에서는 위와 같이 설명하고 있습니다. 항상 새로운 인스턴스를 생성하지 않는 생성자를 구현할때 factory 키워드를 ..
-
[Flutter] freezed 사용하기 ! (Code Generator)개발/Flutter 2023. 1. 10. 12:16
freezed 란? 간략히 말하면 data-classes / unions / pattern-matching / cloning을 위한 Code Generator 데이터 클래스에서 필요로 하는 기능들의 생성을 제공해주는 라이브러리 입니다. Dart에는 union types 및 pattern-matching와 같은 기능이 없습니다. 이것을 직접 구현하려면 리소스가 소비되며 가독성도 떨어질수있어 이러한 문제의 해결에 탁월한 기능을 제공합니다. 생성자 + 속성 정의하기 toString, operator ==, hashCode 오버라이드 객체를 복제하기 위한 copyWith 메서드 구현 역/직열화 처리 사용법 freezed 사용을 위해선 build_runner 와 freezed 를 pubspec.yaml 에 추가 ..
-
[Flutter] Row & Column Widgets개발/Flutter 2022. 10. 27. 10:50
Row widget Row 하위 위젯들을 수평(가로) 방향으로 배치하는 위젯 Row( mainAxisAlignment: MainAxisAlignment.center, // 주 축 기준 중앙 crossAxisAlignment: CrossAxisAlignment.center, // 교차 축 기준 중앙 children: [ Text('Hello!'), Text('Flutter Beginner!'), Icon(Icons.sentiment_very_satisfied), ] ) mainAxisAlignment 속성을 사용하면 주 축을 기준으로 정렬을 수정하는 것이 가능하며, 교차 축 정렬은 crossAxisAlignment 속성을 사용할 수 있다. Column widget Row와 동일 하지만 수직 방향으로 배치 ..