앱 개발 공부방

Getx GetX는 Flutter를 위한 매우 가볍고 강력한 솔루션입니다. 고성능 상태 관리, 지능형 종속성 주입 및 빠르고 실용적인 라우트 관리가 결합되어 있습니다. 설치 dev_dependencies: flutter_test: sdk: flutter get: ^4.3.0 사용할 파일에 추가 import 'package:get/get.dart'; main.dart import 'package:tistory/test2_view.dart'; import 'package:tistory/test_controller.dart'; import 'package:tistory/test_view.dart'; void main() { runApp(const MyApp()); } class MyApp extends Sta..

StatefulWidget Life cycle StatefulWidget의 생명주기는 다음과 같다 출처 https://betterprogramming.pub/stateful-widget-lifecycle-a01c44dc89b0 The Stateful Widget Lifecycle One of the most common questions in Flutter job interviews betterprogramming.pub 1. createState() @override State createState() => _MyHomePageState(); statefulWidget의 필수 메서드로서 state 객체를 생성한다 2. initState() @override void initState() { super...

위 화면처럼 TextFormField에 아무것도 안 쓰여있을 때 빨간색으로 에러를 보여주는 방법을 구현하겠습니다. import 'package:flutter/material.dart'; class MyFormValidation extends StatefulWidget { @override _MyFormValidationState createState() => _MyFormValidationState(); } class _MyFormValidationState extends State { final _formKey=GlobalKey();//자식 위젯들을 구별하기 위해 global key를 사용할 수 있습니다. global key는 모든 위젯 계층을 통틀어 유니크 해야 합니다. global key는 주어진 ..

위 사진과 같은 정적인 화면을 여러 개로 탭으로 보여줄 때 사용하는 TabBar를 구현해보겠습니다. import 'package:flutter/material.dart'; class MyTabController extends StatefulWidget { @override _MyTabControllerState createState() => _MyTabControllerState(); } class _MyTabControllerState extends State { @override Widget build(BuildContext context) { return DefaultTabController( child: Scaffold( appBar: AppBar( title: Text('TabBar'), bot..

Drawer Drawer 메뉴는 사진처럼 클릭 시 좌측에서 스르르 열리는 좌측 사이드 메뉴이다. drawer.dart 파일을 만들어주고 main에서 필요한 부분만 남기고 home: 부분을 알맞게 바꿔주고 시작한다 drawer.dart import 'package:flutter/material.dart'; class MyDrawer extends StatefulWidget { @override _MyDrawerState createState() => _MyDrawerState(); } class _MyDrawerState extends State { @override Widget build(BuildContext context) { return Scaffold( drawer: Drawer( child: L..

AnimatedOpacity Opacity는 투명도로 애니메이션으로 투명도를 조절하는 것입니다 import 'package:flutter/material.dart'; class MyAnimatedOpacity extends StatefulWidget { @override _MyAnimatedOpacityState createState() => _MyAnimatedOpacityState(); } class _MyAnimatedOpacityState extends State { bool _visible=true; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('AnimatedOpacity')..

AnimatedContainer AnimatedContainer는 일정 기간 동안 점차적으로 값을 변경하는 Container 애니메이션 버전입니다. -이전 값과 새로운 값 사이를 자동적으로 애니메이션 합니다. (Curve와 Duration 사용) -속성 값이 null인 것은 애니메이션 하지 않습니다. -자식은 애니메이션 하지 않습니다. -Color, Border, BorderRadii, BackgroundImages, Shadows, Gradients, Shape, Padding, Width, Height, Alignment, Transforms.. 등등을 애니메이션 할 수 있습니다. 위 3개의 사진처럼 floatingActionButton을 누르면 색상 크기 모서리의 동그란 정도등이 랜덤하게 애니메이션..

BottomNavigationBar 말 그대로 아래 사진처럼 앱 아래쪽에 내비게이션 바입니다. import 'package:flutter/material.dart'; class TabPage extends StatefulWidget { @override _TabPageState createState() => _TabPageState(); } class _TabPageState extends State { int _selectedIndex=0; List _pages=[ Text('page1'),Text('page2'),Text('page3') ]; @override Widget build(BuildContext context) { return Scaffold( body: Center(child:_pages..