목록[Flutter] (37)
민프
위 와 같이 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
서브 프로젝트를 할 때 내가 React-Native 말고 Flutter를 선택한 이유를 말해보려고 한다. IOS, Android 같은 디자인 결론부터 말해보자면 개발기간을 짧게 하려고 하기 때문에 IOS, Android 두 플랫폼의 디자인을 신경 쓸 시간이 없어서, Flutter UI를 기준으로 통일 된 UI를 만들어보려고 한다. React-Native는 JavaScript를 통해서 운영체제와 대화를 하고 -> 운영체제는 네이티브 앱 처럼 보이는 컴포넌트와 위젯을 만들어낸다. 그래서 IOS와 Android가 각각의 네이티브 컴포넌트, 위젯으로 만들어지게 되는 것인데 Flutter 같은 경우에는 컴포넌트를 렌더링하기 위해서 운영체제와 직접 소통하는 것이 아닌 C/C++ Engine(Impeller, Ski..
Main 함수 Dart에서 Main함수는 모든 Dart 프로그램의 Entry point이기 때문에 중요하다 만약 main을 다른 함수명으로 바꾼다면 아래 사진과 같이 Run | Debug 내용이 없어지게 되고, 실제로 이 코드를 강제로 실행하려고 하면 'main'이 없어서 에러가 나게 된다. 세미클론 세미클론을 끝에 꼭 붙여줘야한다. 변수 - 선언 변수를 선언하는 방식에는 2가지가 있는데 결론적으로 Dart 스타일가이드에서는 메소드 안에서 지역변수를 선언하는 상황이라면 var을 사용하고, class에서 변수나 property를 선언할 때에는 타입을 지정해주는 것을 권장하고 있다. 1. Var 변수 TypeScript와 같은 것 같은데 아래 코드와 같이 변수의 타입을 꼭 구체화 할 필요는 없다. void ..
https://dart-ko.dev/ Dart 프로그래밍 언어 Dart는 모든 플랫폼에서 빠른 앱을 개발하기 위해 클라이언트에 최적화된 언어입니다 dart-ko.dev Dart(다트)란? 공식홈페이지에 따르면 Dart는 모든 플랫폼에서 빠른 앱을 개발하기 위해 클라이언트에 최적화된 언어입니다. Dart의 목표는 앱 프레임워크를 위한 유연한 실행 런타임 플랫폼 을 가진 멀티 플랫폼 개발을 위한 가장 생산적인 프로그래밍 언어를 제공하는 것입니다. Dart의 언어 설계는 클라이언트 개발에 적합하게 개발되었으며 다중 플랫폼 (웹, 모바일 및 데스크톱)에서의 개발(1초 이하의 stateful 핫리로드)과 높은 퀄리티의 프로덕션 경험을 우선시합니다. Dart는 Flutter의 기반을 형성하였습니다. Dart 언어는..