벌써 4월 26일이라니.. 작년에 비해서 시간이 총알같이 가네.. 체감상 한 3배는 더 빠른듯?? 쿠팡은 요즘엔 글을 올리지도 않는데 왜 수익이 나는것인지.. 신기하네

이미지 추가하기 적당한 폴더에 이미지를 저장한다. 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); }

진짜 오랜만에 글 쓰네요ㅎㅎ 네이버 블로그 좀 쓰다가, 구글블로거도 쓰다가 이리저리 기웃기웃하다가 다시 hugo로 돌아왔습니다. 포스팅하는게 번거롭긴 하지만, 정성들이는 맛이 있어요ㅎㅎ ...

이력 2020.02.02 포스팅 안녕하세요. 많이 늦었죠? ㅎㅎ, 쓰기가 너무 귀찮아요..ㅋㅋ 사실 요즘에는 쿠팡 상품도 안올리고 있어요. 귀찬쓰.. 아무튼 오늘도 시작하겠습니다. 과정이 길게 느껴질수도 있는데, 어렵지는 않아요. 하나하나 따라 하시면 금방하실 수 있어요. ...

미뤄왔던 정보보안기사, 정보처리기사 자격증을 땄습니다. 두 자격증모두 따야지, 따야지 생각만 하다가 드디어 땄네요. 정보처리기사는 되게 쉬웠어요. IT쪽에서 일하고 있어서 정말 쉽게 땄습니다. ...

안녕하세요. 저번 시간에 파트너스 API를 통해서 상품정보를 가져오는 것까지 했습니다. 오늘은 쿠팡에 있는 상품 이미지 가져오는 방법에 대해서 설명하겠습니다. API를 호출해 가져온 상품정보에 접속할 수 있는 URL이 있었는데요. 그 URL를 통해 상품페이지로 접속해서 이미지를 가져올꺼에요. 오늘꺼 조금 깁니다… ...