민프

BottomNavigation을 빠르게 구현하고 싶다면 아래 Widget들을 사용해보자 참고로 Flutter는 material 디자인을 체택하고 있는데 아래 링크를 참고헤서 m2랑 무엇이 다른지도 확인해보고 참고해보자 https://m3.material.io/ Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. m3.material.io BottomNavigationBar (m2 - material) class _MainNavigation..

기본 위젯 언어 설정pubspec.yamldependencies:... flutter: sdk: flutter flutter_localizations: sdk: flutter intl: anyhttps://pub.dev/packages/flutter_localizationhttps://pub.dev/packages/intl위 패키지들을 설치해주고 아래 main.dart에 localizationsDelegates를 추가해준다. localizationsDelegates여기에서 delegates란 일종의 번역 파일들로 생각하면 된다.main.dart @override Widget build(BuildContext context) { return MaterialApp( ..

@override Widget build(BuildContext context) { return GestureDetector( onPanUpdate: _onPanUpdate, onPanEnd: _onPanEnd, child: Scaffold( 화면을 넘기는 Swipe를 GestureDetector는 Pan이라고 한다. 여기에서 onPanUpdate는 사용자가 dragging(화면을 누른 상태로 손가락을 움직이는 상태)할 때를 말하고, onPanEnd는 사용자가 dragging을 끝냈을 때 콜백되는 함수를 말한다. onPanUpdate에 들어가는 함수를 봐보자 void _onPanUpdate(DragUpdateDetails details) { if (details.delta.dx > 0) { setStat..

위 와 같이 Container안에 왼쪽에는 아이콘 가운데에는 글자를 넣어야하는 상황이 많이 오게 되는데 할 수 있는 방법은 여러가지 있지만 그 중 가장 쉽게 텍스트의 가운데를 확실하게 잡아주는 것 같아서 기록해두려고 한다. import 'package:flutter/material.dart'; import 'package:tiktok_clone/constants/sizes.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; class AuthButton extends StatelessWidget { final String text; final FaIcon icon; const AuthButton({super.key, requir..

https://fontawesome.com/icons Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 플러터에서 UI 아이콘을 간단하게 사용할 때 무료 아이콘만 해도 어느정도는 개발할 수 있을 것이다. 물론 Flutter에도 Material, Cupertino, Google, IOS 몇몇 아이콘이 포함되어있긴한데 평소에 Font Awesome을 사용해서 Flutter에서도 사용해보려고 한다. https://pub.dev/packages/font_awesome..

StatefulWidget의 생명주기를 알아보자 StatefulWidget위젯은 정보가 업데이트 됨에 따라 UI도 변경되게 되는데 생명주기가 어떻게 될까? 근데 원초적인 질문부터 해보자면 생명주기를 왜 알아야할까? 인데 여러 프레임워크, 라이브러리를 사용할 때 생명주기를 모른다면 어느 부분에서 최적화를 해야만 서비스가 나아지는지 모른다는 것이다. 쉽게 말해 어느 타이밍에 무언가를 불러와야하고, 업데이트 해야 하는지를 알아야 하는데 그 타이밍이 바로 생명주기라는 것이다. 그럼 본론으로 Flutter - StatefulWidget의 생명주기는 무엇일까? StatefulWidget - lifecycle 공식 홈페이지에서 심플하게 나타낸게 있는데 아래와 같다. createState() : Flutter에서 빌드..

아래 코드를 보면 BuildContext context라는게 있는데 이게 뭘까? import 'package:flutter/material.dart'; void main() { runApp(const App()); } class App extends StatefulWidget { const App({super.key}); @override State createState() => _AppState(); } class _AppState extends State { int counter = 0; void onClicked() { setState(() { counter = counter + 1; }); } @override Widget build(BuildContext context) { return Mate..

Flutter 개발을 할 때 아래 사진과 같이 "use const with the constructor to improve performance..."가 나오게 되는게 이게 왜 나오는걸까? const가 무엇인지는 https://minf.tistory.com/226 [Flutter] const, final의 공통점과 차이점 (feat. Runtime, Compile Time) https://minf.tistory.com/223 [Flutter] Dart언어에서 알면 좋은 점 (Feat. 객체지향언어) Main 함수 Dart에서 Main함수는 모든 Dart 프로그램의 Entry point이기 때문에 중요하다 만약 main을 다른 함수명으로 바꾼다 minf.tistory.com 위 링크에서 올려놨으니 참고하기..

https://minf.tistory.com/223 [Flutter] Dart언어에서 알면 좋은 점 (Feat. 객체지향언어) Main 함수 Dart에서 Main함수는 모든 Dart 프로그램의 Entry point이기 때문에 중요하다 만약 main을 다른 함수명으로 바꾼다면 아래 사진과 같이 Run | Debug 내용이 없어지게 되고, 실제로 이 코드를 강제 minf.tistory.com 위 포스팅에서 const, Final 변수에 대해서 간단하게 알아봤었는데 이번 포스팅에서는 좀 더 명확하게 알아보려고 합니다. Flutter에서 const와 final은 모두 변수 선언 시 사용되는 키워드로, 변수를 상수로 선언하거나 변수에 할당된 값을 변경할 수 없도록 만듭니다. 하지만 동작 원리와 차이점에는 몇 가지..

MainAxisAlignment : 주축 CrossAxisAlignment : 횡축 Row(행) 일 경우 MainAxisAlignment : 주축 (가로) CrossAxisAlignment : 횡축 (세로) Column(열) 일 경우 MainAxisAlignment : 주축 (세로) CrossAxisAlignment : 횡축 (가로) 속성 값 참고 https://docs.flutter.dev/codelabs/layout-basics Basic Flutter layout concepts A codelab that teaches basic Flutter layout concepts through DartPad examples and exercises. docs.flutter.dev