Posts

이력 2021.08.01 포스팅 2021.11.25 약간 수정 모든 내용을 상세히 담으려 하지 않았습니다. 제가 모르는 부분이나, “이런 것도 있었어?” 하는 부분, 중요하다고 생각되는 부분, 다시 한번 되새기고 싶은 부분만 기록했습니다. 읽어주셔서 감사합니다. ...

이력 2021.08.01 포스팅 2021.11.25 약간 수정 모든 내용을 상세히 담으려 하지 않았습니다. 제가 모르는 부분이나, “이런 것도 있었어?” 하는 부분, 중요하다고 생각되는 부분, 다시 한번 되새기고 싶은 부분만 기록했습니다. 읽어주셔서 감사합니다. ...

이력 2021.07.25 포스팅 2021.11.25 약간 수정 모든 내용을 상세히 담으려 하지 않았습니다. 제가 모르는 부분이나, “이런 것도 있었어?” 하는 부분, 중요하다고 생각되는 부분, 다시 한번 되새기고 싶은 부분만 기록했습니다. 읽어주셔서 감사합니다. ...

이력 2021.07.20 포스팅 2021.07.25 약간 수정 2021.11.25 약간 수정 그동안 미루고 미뤄왔던 몰입! 자바스크립트를 제대로 보려고 합니다. 매일매일 읽고, 읽는 부분만큼 요약해서 업로드하겠습니다. 개인적인 견해이지만, 참고로 이책은 스펙을 설명하는 내용이 주이기 때문에 지루합니다. 애정을 갖고 봐야 재미를 찾을 수가 있습니다. 모든 내용을 상세히 담으려 하지 않았습니다. 제가 모르는 부분이나, “이런 것도 있었어?” 하는 부분, 중요하다고 생각되는 부분들만 기록했습니다. 읽어주셔서 감사합니다. ...

벌써 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); }