본문 바로가기

flutter

 (11)
freezed live template로 쉽게 생성하기 freezd 플러그인을 추가하여 클래스를 만드는데 직접입력하는 것이 귀찮으니 live template에 등록해서 편하게 사용하자 1. file -> settings -> Editor -> Live Templates 2. live template 등록하기 1. add 버튼(사진에서 1번)을 누르고 Live Template(사진에서 2번) 클릭 2. Abbreviation에서 내가 사용할 약어를 입력하고 Description에 해당 live template에 대한 간단한 설명 입력 3. 코드 입력하기 import 'package:json_annotation/json_annotation.dart'; import 'package:freezed_annotation/freezed_annotation.dart'; p..
context 없이 navigation 구현하기 class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => UserProvider()), ], child: MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( primaryColor: ColorPalette.white, scaffoldBackgroundColor: ColorPalette.white, visualDensity: Visu..
expandable fab https://docs.flutter.dev/cookbook/effects/expandable-fab Create an expandable FAB How to implement a FAB that expands to multiple buttons when tapped. docs.flutter.dev 1. create an expandable fab @immutable class ExpandableFab extends StatefulWidget { const ExpandableFab({ super.key, this.initialOpen, required this.distance, required this.children, }); final bool? initialOpen; final double dista..
singleton 1. 싱글톤 개념 객체의 인스턴스가 오직 하나만 생성되는 것, 즉 여러개의 생성자를 호출 하더라도 실제로 생성되는 인스턴스는 하나이다. 2. 싱글톤 형태 class Singleton { static final Singleton _instance = Singleton._internal(); // _instance 값을 반환한다. // 값이 있으면 원래 값을 반환한다. factory Singleton() => _instance; Singleton._internal(){ // 클래스가 최초 생성될 때, 1회 발생 // 초기화 코드 } } 3. 싱글톤 클래스, 일반 클래스 비교 class Singleton { late int count; static final Singleton _instance = Single..
flutter 해당 위젯 코드 쉽게 찾기 이 기능의 경우 Debug 실행 시에 가능하다. 안드로이드 스튜디오, 인텔리제이 우측에 보면 Flutter Inspector가 있다. Flutter Inspector에 들어가서 좌측 상단에 보면 toggle select widget mode 라는 Icon이 있다. 클릭을 하여 모드 활성화를 하고 에뮬레이터 화면에서 위젯을 클릭하면 쉽게 위젯 코드가 어디에 있는지 찾을 수 있다.
BoxConstraints forces an infinite width @override Widget build(BuildContext context) { bool isDark = context.watch().state.isDark; return Stack( children: [ Container( width: double.infinity, padding: const EdgeInsets.all(12), decoration: BoxDecoration( borderRadius: BorderRadius.circular(4), border: Border.all( color: isDark ? ColorPalette.borderDark : ColorPalette.border)), child: Column( crossAxisAlignment: CrossAxisAlignment.start..
IntrinsicWidth, UnconstrainedBox flutter로 ui를 그리는 중 아래와 같이 그려야 하는 상황이 발생하였다. 왼쪽 끝은 container 리스트, 오른쪽 끝은 하나의 아이콘으로 정렬되는 위젯이다. Widget _box(){ return Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(4), border: Border.all(color: Colors.black) ), padding: const EdgeInsets.all(8), child: Row( children: const [ Text('테스트'), Icon(Icons.close), ], ), ); } Widget _row(){ return Row( children: [ ...List.generate..
TextStyle 정의하기 TextStyle 재활용 할 수 있게 정의하기 class CustomTextStyle extends TextStyle { const CustomTextStyle({ required String fontFamily, required Color color, required double fontSize, required FontWeight fontWeight, int? height, Paint? foreground, }) : super( fontFamily: fontFamily, color: color, fontSize: fontSize, fontWeight: fontWeight, height: height == null ? null : height / fontSize, leadingDistribution: ..
flutter + firebase 연동하기 1. firebase 프로젝트 추가 https://console.firebase.google.com/u/0/ 2. firebase flutter 앱 추가 만들었던 프로젝트에 들어가서 flutter 앱추가 먼저 Firebase CLI를 설치하고 firebase login하기 https://firebase.google.com/docs/cli?authuser=0&hl=ko#install_the_firebase_cli Firebase CLI 참조 | Firebase Documentation FirebaseVisionOnDeviceAutoMLImageLabelerOptions firebase.google.com 두번째 줄의 커맨드는 flutter 프로젝트 root에서 입력해야한다. 해당 flutter projec..
flutter CustomPaint CustomPainter 화면을 직접 그릴 때 사용한다. 기존의 UI로 만들기 어려운 화면을 만들고 싶을 때 유용하다. Canvas : 그림을 그리는 동작이 기록된다. Paint : 그림의 특성들을 저장한다. CustomPainter : Canvas, Paint를 담아낸다. CustomPaint : CustomPainter의 상위 위젯이다. CustomPainter 구현 class MyPainter extends CustomPainter{ @override void paint(Canvas canvas, Size size) { Paint paint = Paint() // Paint 클래스는 어떤 식으로 화면을 그릴지 정할 때 사용 ..color = Colors.deepPurpleAccent // 선의 색 ..

티스토리툴바