Flutter

이미지 추가하기 적당한 폴더에 이미지를 저장한다. pubspec.yaml 의 aseets 에 이미지를 추가한다. 이미지를 호출하는 방법은 크게 3가지 file : 외부의 파일을 사용 asset : 앱에 미리 넣어놓은 파일 사용(지금 사용하는 방식) memory : 메모리에 올라와있는 이미지 데이터 사용 1 2 3 4 5 6 7 8 9 10 flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true # To add assets to your application, add an assets section, like this: assets: - image/dog.jpg 폰트 추가하기 적당한 폴더에 폰트를 저장한다. pubspec.yaml 의 fonts 에 이미지를 추가한다. 폰트파일이름은 영어만 가능하다. 1 2 3 4 fonts: - family: Pacifico fonts: - asset: font/Pacifico-Regular.ttf 위젯에서 이미지와 폰트 사용해보기 이전 포스트에서 사용한 위젯에서 추가한 이미지와 폰트를 사용해봅니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 import 'package:flutter/material.dart'; class ChangeTextByButton extends StatefulWidget { @override State<StatefulWidget> createState() { print('createState()'); // 여기 출력! return _ChangeTextByButton(); } } class _ChangeTextByButton extends State<ChangeTextByButton> { var swVal = false; var str = 'Jaejin Jang off'; @override void initState() { super.initState(); // 여기 출력! print('initState()'); } @override Widget build(BuildContext context) { print('build'); // 여기 출력! return MaterialApp( title: 'ChangeTextByButton', theme: ThemeData( primaryColor: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity), darkTheme: ThemeData.light(), home: Scaffold( appBar: AppBar( // appbar 추가 title: Text('App Bar 추가해보기'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( str, style: TextStyle( fontFamily: 'Pacifico', color: Colors.blue, fontSize: 20), //내가 추가한 폰트 지정! ), Switch( value: swVal, onChanged: (value) { setState(() { print('setState'); // 여기 출력! swVal = value; str = value ? 'Jaejin Jang On' : 'Jaejin Jang off'; }); }, ), Row( // 가로위젯 여러개 넣어보기 mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '가로로 위젯 추가해보기 1', style: TextStyle(color: Colors.orange, fontSize: 20), ), Icon(Icons.access_alarm), Icon(Icons.access_time), Icon(Icons.account_tree), Icon(Icons.add_to_drive), Icon(Icons.laptop), ], ), Image.asset('image/dog.jpg', // 그림 나타내기! height: 300, width: 400, fit: BoxFit.contain), ])), floatingActionButton: FloatingActionButton( // 플로팅버튼 추가 child: Icon(Icons.add), onPressed: () {}, ), ), ); } }

머티리얼 디자인을 통해 일관된 디자인을 제공할 수 있음 스캐폴드(scaffold) 클래스를 통해 머티리얼 디자인 레이아웃으로 개발 가능함 Scaffold 클래스 더 활용해보기 이전 포스트에서 만들 었던 버튼누르면 글자바뀌는 위젯을 계속해서 사용하겠습니다. appBar 추가하기 floatingActionButton 추가하기 Row, Column 클래스 이용해 가로 또는 세로로 여러 위젯 추가하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 import 'package:flutter/material.dart'; class ChangeTextByButton extends StatefulWidget { @override State<StatefulWidget> createState() { print('createState()'); // 여기 출력! return _ChangeTextByButton(); } } class _ChangeTextByButton extends State<ChangeTextByButton> { var swVal = false; var str = 'Jaejin Jang off'; @override void initState() { super.initState(); // 여기 출력! print('initState()'); } @override Widget build(BuildContext context) { print('build'); // 여기 출력! return MaterialApp( title: 'ChangeTextByButton', theme: ThemeData( primaryColor: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity), darkTheme: ThemeData.light(), home: Scaffold( appBar: AppBar( // appbar 추가 title: Text('App Bar 추가해보기'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( str, style: TextStyle(color: Colors.blue, fontSize: 20), ), Switch( value: swVal, onChanged: (value) { setState(() { print('setState'); // 여기 출력! swVal = value; str = value ? 'Jaejin Jang On' : 'Jaejin Jang off'; }); }, ), Row( // 가로위젯 여러개 넣어보기 mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '가로로 위젯 추가해보기 1', style: TextStyle(color: Colors.orange, fontSize: 20), ), Icon(Icons.access_alarm), Icon(Icons.access_time), Icon(Icons.account_tree), Icon(Icons.add_to_drive), Icon(Icons.laptop), ], ), ])), floatingActionButton: FloatingActionButton( // 플로팅버튼 추가 child: Icon(Icons.add), onPressed: () {}, ), ), ); } }

StatelessWidget - 생명주기 없음 StatefulWidget - 10단계의 생명주기를 가짐 출처: https://www.raywenderlich.com/books/flutter-apprentice/v1.0.ea3/chapters/4-understanding-widgets 1. createState() - 상태생성 StatefulWidget이 State를 생성하기 위해 무조건 호출해야 하는 함수 2. mounted == true - setState() 호출가능 State가 생성되면 mounted property가 true로 설정됨 위젯을 제어할 수 있는 buildContext 클래스에 접근 가능해지며 setState()를 호출할 수 있게 된다. setState() 호출전에 mounted property를 체크하면 더 안전한 코드를 작성할 수 있다. 1 2 3 if (mounted) { setState(); } 3. initState() - 위젯초기화 위젯 초기화시 1번 호출한다. 위젯에 필요한 데이터를 준비하기 좋은 구간 4. didChangeDependencies() - 의존성 변경시 호출 initState() 이후에 호출된다. 데이터에 의존하는 위젯이라면 화면에 표시하기 전에 꼭 호출해야함 상속받은 위젯을 사용할때 Super(Parent)가 변경되면 호출함 5. build() - 위젯 반환 위젯을 반환한다. 반환된 위젯이 렌더링되어 화면에 표시된다. 6. didUpdateWidget() - 위젯 갱신시 Parent 위젯이나 데이터가 변경되어 위젯을 갱신해야 할 때 호출한다. 위젯이 생성되고 나서 갱신을 해야 할때는 initState()가 아니라 didUpdateWidget()을 호출해야 함 7. setState() - 상태 갱신시 데이터가 변경되었다는 것을 알리고 UI를 갱신함 8. deactivate() - 상태 관리 멈춰! State가 플러터의 구성 트리로부터 제거됨 따라서, 관리는 되지 않으나 메모리 해제까지 한것은 아니라 사용가능함 9. dispose() - 상태 관리 끝 State를 소멸함 위젯을 없앨때 해줘야하는 작업이 있다면 여기에 작성 deactivate() 된 위젯을 다른 트리에서 재사용하는 경우 dispose()하 호출되지 않을 수 있음 10. mounted == false - setState() 호출가능 생명주기 출력해보기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 import 'package:flutter/material.dart'; class ChangeTextByButton extends StatefulWidget { @override State<StatefulWidget> createState() { print('createState()'); // 여기 출력! return _ChangeTextByButton(); } } class _ChangeTextByButton extends State<ChangeTextByButton> { var swVal = false; var str = 'Jaejin Jang off'; @override void initState() { super.initState(); print('initState()'); // 여기 출력! } void didChangeDependencies() { super.didChangeDependencies(); print('didChangeDependencies()'); // 여기 출력! } @override Widget build(BuildContext context) { print('build'); // 여기 출력! return MaterialApp( title: 'ChangeTextByButton', theme: ThemeData( primaryColor: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity), darkTheme: ThemeData.light(), home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( str, style: TextStyle(color: Colors.blue, fontSize: 20), ), Switch( value: swVal, onChanged: (value) { setState(() { swVal = value; str = value ? 'Jaejin Jang On' : 'Jaejin Jang off'; }); }, ), ]))), ); } }

사용하는 위젯 설명 MaterialApp - Material 디자인 제공 Scaffold - 기본적인 Material 디자인 레이아웃 제공 Center - 상하 가운데 정렬 Swich - 토글스위치 제공 Text - 텍스트 Column - chlidren 속성이 있어 여러개의 하위 위젯을 배치가능 ...

구구단 1 2 3 4 5 6 7 void main() { for (int i = 2; i < 10; i++) { for (int j = 1; j < 10; j++) { print('${i} * ${j} = ${i * j}'); } } } 자동차 클래스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 class Car { int maxSpeed; num price; String name; Car(int maxSpeed, num price, String name) { this.maxSpeed = maxSpeed; this.price = price; this.name = name; } num saleCar() { this.price *= 0.9; return this.price; } } void main() { Car bmw = new Car(320, 100000, 'BMW'); Car benz = new Car(250, 70000, 'BENZ'); Car ford = new Car(200, 80000, 'FORD'); bmw.saleCar(); bmw.saleCar(); bmw.saleCar(); print(bmw.price); } 로또 번호 생성 1 2 3 4 5 6 7 8 9 10 11 12 import 'dart:math'; void main() { Random r = Random(); Set<int> s = {}; while (s.length != 6) { s.add(r.nextInt(45) + 1); } print(s); }