앱 개발 공부방

위 화면처럼 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..

snackBar snackBar는 하단에 붙어 나오는 직사각형의 막대형 위젯이라 생각하면 된다. 약간 안드로이드에서 Toast 메시지랑 비슷하다 import 'package:flutter/material.dart'; class MySnackBar extends StatefulWidget { @override _MySnackBarState createState() => _MySnackBarState(); } class _MySnackBarState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('snackBar'), ), body: Builder( builder..

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..

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..

StatefulWidget StatefulWidget은 Stateless와 반대로 상태를 가질수 있는 위젯 입니다. 처음 화면이 렌더링 되고 사용자에게 입력을 받거나 클릭으로써 상태가 바뀌는 등 작업에 사용합니다 생명주기 1.Stateful 의 Constructor가 제일먼저 호출 2.createState 메서드가 실행되며 state를 생성 3.initState 메서드가 실행되며 state를 초기화 4.build 메서드가 실행되며 렌더링 과정을 거침 5.Stateful 의 build 메서드가 실행될때 Stateless 의 Constructor 실행 6.Stateless 의 build 메서드가 실행되며 렌더링되고 화면에 그려줌 이번글에서는 저번 글에서 썻던 코드에 stateful위젯 추가와 그 안에 flo..

처음으로 flutter 프로젝트를 생성하시면 데모앱이 나올겁니다 다 지워주고 아래 코드처럼 칩니다 import 'package:flutter/material.dart'; void main() => runApp(new MyApp());//앱 실행 class MyApp extends StatelessWidget {//상태 변경이 없는 위젯 // This widget is the root of your application. @override Widget build(BuildContext context) {//UI를 만드는 부분 return MaterialApp(//구글 기본 디자인인 Material 디자인을 써서 앱을 만든다 title: 'Flutter Demo', theme: ThemeData(//앱 이름..