프로젝트 구조

.idea : 개발 도구에 필요한 설정 android : 안드로이드 네이티브 코드를 작성하는 부분 build : 빌드시 생성되는 파일 ios : ios 네이티브 코드를 작성하는 부분 lib : 다트 코드를 작성하는 부분 test

.gitignore .metadata : 프로젝트가 관리하는 파일 .,pacakages : 각종 패키지 정보 flutter_app.iml : 개발 도구에 필요한 설정 파일 pubspec.lock : 패키지 매니저가 이용하는 파일 pubspec.yaml : 패키지 매니저가 이용하는 파일 README.md

StatelessWIdget

상태를 가지지 않는 위젯을 구성하는 기본 클래스

한번 그려진 후 다시 그리지 않는 경우. 프로퍼티로 변수를 가지지 안흔다. (상수는 가질 수 있다.)

MaterialApp 클래스

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: MyHomePage(title: 'Flutter Demo Home Page'),
)

title : 제목 theme : 테마 home : 작성하는 위젯이 실제 이 앱이 표시하는 위젯

StateFulWidget

상태가 있는 위젯을 정의할 떄 사용

StateFulWidget 클래스는 StatefulWidget을 상속받은 MyHomePage 클래스와 State<MyHomePage> 클래스를 상속받은 _MyHomePageState 클래스로 구성됨.

createState() 메소드는 StatefulWidget이 생성될 때 한번만 실행되는 메서드

State 클래스를 상속받은 클래스는 상태 클래스 라고 부름.

상태클래스는 변경 가능한 상태를 프로퍼티 변수로 표현함. 이 변수의 값을 변경하면서 화면을 다시 그리게 됨.

setState() 메서드는 전달된 익명 함수를 실행한 후 화면을 다시 그리게하는 역할을 함.

화면은 build() 메서드가 실행되면서 그려진다.

즉, setState()메서드는 build() 메서드가 다시 실행되게 하는 역할.

Scaffold 클래스 , AppBar 클래스

build() 메서드가 호출될 때 불리는 Scaffold 클래스

Scaffold 클래스는 머티리얼 디자인 앱을 만들 떄 뼈대가 되는 위젯. 즉, 머티리얼 디자인 앱을 만든다면 MaterialApp -> Scaffold가 기본 형태.

// 그림

’$_counter’

정수형 변수를 Text위젯에 표시하려면 문자로 변경해야함.

변숫값을 문자열 형태로 변경하고자 할 때는 변수 앞에 $기호를 붙임.

FloatingActionButton

Scaffold 클래스는 머티리얼 디자인에 자주 사용되는 FloatingActionGButton 클래스를 정의하는 프로퍼티를 제공함.

floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  child: Icon(Icons.add),
),

onPressed 프로퍼티는 버튼이 눌러지면 실행되는 부분이다.

여기에 동작시킬 코드를 함수 형태로 작성함. 다트에서는 함수도 값으로 사용될 수 있기 때문에, _increamentCount()메서드의 이름을 직접 값으로 작성했음.

onPressed: () => _incrementCounter(),

onPressed: () {
  return _incrementCounter();
}

tooltip 프로퍼티에는 사용자가 FloatingActionButton을 길게 터치할 때 표시할 글자를 지정

child 프로퍼티에는 아이콘 인스턴스를 정의하여 +모양 버튼을 표현

image

Image.network("https://picsum.photos/200"),

 FadeInImage.assetNetwork(placeholder: "assets/loading.gif", image: "https://picsum.photos/200"),