오공완 (with Do it! 플러터 앱 프로그램밍) #3

// 이곳에 쓴 내용은 앱 만들기라는 버킷리스트를 달성하기 위해 플러터를 공부하면서 정리하고 있는 내용입니다.

플러터에 대해 아는 것이 거의 없기 때문에 정리하면서 오류가 있을 수 있습니다.

오류를 발견하신 분은 댓글 남겨 주시면 감사하겠습니다.

 

어제 오류를 못 잡은 거 다시 들여다봤다. 왜 이래야 하는지는 모르겠으나 일단, 해결은 했다.

문제는 var swichValue = false; 의 위치 전에는 것은 widget 함수 밑에 있었다. 책에서도 위젯 함수 밑에 있는데..

암튼 class _MyApp extends State<MyApp>{ 밑으로 뺐더니 해결이 됐다.

논리 구조를 아직 이해를 못하니 이 녀석이 코드 한 줄로 왜 이렇게 예민하게 구나 싶다~^^;;;

 

오늘은 위젯의 생명주기 이해하기란다.

앱 인벤터에서 아쉬웠던 점이 백그라운드(이 용어가 맞는지 모르겠다.)에서 작동을 안 하는 문제로 인해 포기한 기능이 있다. 나는 앱 화면이 꺼져도 시간이 흘러가길 바라는데, 화면이 꺼지면 작동 시간도 같이 멈추는 문제가 있었다. 그래서 계속 화면이 꺼지지 않도록 알림을 반복적으로 띄워서 해결을 한 기억이다.

 

1. 상태를 생성하는 creatState()함수

2. 위젯을 화면에 장착하면 mounted == true

3. 위젯을 초기화하는 initState() 함수

4. 의존성이 변경되는 호출하는 didChageDependencies()함수

5. 화면에 표시하는 build() 함수

6. 위젯을 갱신하는 didUpdateWidget() 함수

7. 위젯의 상태를 갱신하는 setSate() 함수

8. 위젯의 상태 관리를 중지하는 deactivate() 함수

9. 위젯의 상태 관리를 완전히 끝내는 dipose() 함수

10. 위젯을 화면에서 제거하면 mounted == false

 

   4강 플러터 위젯 사용법

 

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Material Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        ),
        home: MaterialFlutterApp(),
  );
 }
}

class MaterialFlutterApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MaterialFlutterApp();
  }
}

class _MaterialFlutterApp extends State<MaterialFlutterApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Material Design App'),),
        floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
          onPressed: () {
    }),
      body: Container(
        child: Center(
            child: Column(
              children: <Widget>[
                Icon(Icons.android),
                Text('android')
              ],
              mainAxisAlignment: MainAxisAlignment.center,
            ),
        ),
      ),
    );
  }
}

예전 파란색 버튼이 더 마음에 든다..ㅜ.ㅜ

 

1. 이미지를 추가하기 위해 lib폴더 안에 imageWidget 다트 파일 만들기

import 'package:flutter/material.dart';

class ImageWidgetApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState(){
    return _ImageWidgetApp();
  }
}

class _ImageWidgetApp extends State<ImageWidgetApp> {
  @override
  Widget build(BuildContext context) {
    return null;
  }
}

2. 프로젝트 안에 image 폴더 만들고, 폴더 안에 이미지 넣기

3. pubspec.yaml에 아래 코드 넣기(들여쓰기를 잘해야 한다고.. 다른 책에서 모든 이미지를 쓰는 코드도 있었는데.. 그건 다음에 찾아봐야겠다.)

assets:
  - image/flutter.png

4. imageWidget 파일 수정

5. main다트 파일 수정

 

또~!! 오류~!!

이건 imagewidget.dart 파일

import 'package:flutter/material.dart';

class ImageWidgetApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState(){
    return _ImageWidgetApp();
  }
}

class _ImageWidgetApp extends State<ImageWidgetApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Widget'),),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.asset('image/flutter.png', width: 200, height: 100,)
            ],
          ),
        ),
      ),
    );
  }
}

 

1번은 다트 파일을 소문자랑 언더바만 사용하라는 의미란다. imageWidget을 imagewidget으로 바꾸는 1번은 해결.

2번은 키 파라미터 어쩌고~

3번은 const를 사용하라고? 그게 뭔데~

4번은 container가 필요 없다고? 나도 안 넣고 싶다~~

 

"The file name 'imageWidget.dart' isn't a lower_case_with_underscores identifier.

Constructors for public widgets should have a named 'key' parameter.

Use 'const' with the constructor to improve performance.

Unnecessary instance of 'Container'."

 

너네는 내일 보자~~ 에너지 방전~~