목록전체 글 (294)
민프
리엑트란? https://ko.legacy.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.legacy.reactjs.org 공식 홈페이지를 보면 아래와 같이 나와있다. React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. - React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이다. - UI를 구성하는 컴포넌트 기반의 개발을 지원한다. - React에서의 "가상 DOM"은 React가..
아래 GIF는 인스타그램의 릴스 페이지를 보여주는 부분인데 저렇게 한 페이지, 페이지를 밑으로 내려서 구현하는 것을 해보려고 하는데 Flutter에서는 저 부분을 구현하기 쉽게 PageView 라는 Widget을 이용해서 구현할 수 있다. https://api.flutter.dev/flutter/widgets/PageView-class.html PageView class - widgets library - Dart API A scrollable list that works page by page. Each child of a page view is forced to be the same size as the viewport. You can use a PageController to control whic..
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.yaml dependencies: . . . flutter: sdk: flutter flutter_localizations: sdk: flutter intl: any https://pub.dev/packages/flutter_localization https://pub.dev/packages/intl 위 패키지들을 설치해주고 아래 main.dart에 localizationsDelegates를 추가해준다. localizationsDelegates 여기에서 delegates란 일종의 번역 파일들로 생각하면 된다. main.dart @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutt..
@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 위 링크에서 올려놨으니 참고하기..