플러터 앱프로그래밍 Day3

플러터 앱프로그래밍 Day3

플러터 프로젝트를 만들면 많은 파일과 폴더가 자동으로 생성된다.

이러한 플러터 프로젝트의 구성을 살펴보도록 한다.

 

그리고, 플러터 앱 개발에서 핵심인 위젯과 생명주기를 알아보려고 한다. 

 

 

플러터 프로젝트 구조

폴더	내용	비고
android	안드로이드 프로젝트 관련 파일	안드로이드 스튜디오로 실행 가능
iOS	iOS 프로젝트 관련 파일	엑스코드로 실행 가능(맥 전용)
lib	플러터 앱 개발을 위한 다트 파일	플러터 SDK 설치 필요
test	플러터 앱 개발 중 테스트 파일	테스트 편의성 제공

 

루트에서도 여러 파일이 있지만, 여기서 주목할 파일은 pubspec.yaml이다. 

pubspec.yaml 파일은 플러터에서 다양한 패키지와 이미지, 폰트 등을 사용할 수 있게 해준다.

 

 

 

 

 

상태 연결에 따른 위젯 구분

 

플러터 앱을 구성하는 위젯은 스테이트리스(stateless)와 스테이트풀(statefull) 두 가지로 구분된다.

 

내용을 갱신할 필요가 없는 위젯은 화면에 보이기 전에 모든 로딩을 끝낸다.

상태를 연결할 필요가 없는 위젯을 스테이트리스 위젯이라고 하며 StatelessWidget 클래스를 상속 받아서 만든다. 

 

반면에 내용을 갱신해야 할 때도 있다.

앱이 위젯의 상태를 감시하다가 위젯이 특정 상태가 되면 알맞은 처리를 수행해야 한다. 

이처럼 상태가 연결된 동적인 위젯을 스테이트풀 위젯이라고 하며 StatefullWidget 클래스를 상속 받아서 만든다. 

 

 

 

 

 

데모 앱 수정하기 

안드로이드 스튜디오가 만들어준 플러터 프로젝트의 데모 앱을 변경한다. 

 

마지막 줄 home : Text('HelloFlutter'), 만 수정을 해준다. 

 

실행 결과는 다음과 같다. 

 

기본적인 화면 구조에서 벗어나면 기본 테마가 적용되지 않고

위와 같이 텍스트에 노란색 밑줄이 생긴다. 

 

 

이번에는 텍스트를 화면 한가운데에 놓아보려고 한다. 

 

home : Center(
        child : Text('Hello\nFlutter', textAlign: TextAlign.center),
      ));

 

위의 코드와 같이 아까 그 부분을 다시 수정해주면 

Center()함수를 호출하고 child 옵션에 Text()함수를 넣었다. 

 

child 옵션은 자신 아래 어떤 위젯을 넣겠다는 의미이다. 

하나만 넣을 때는 child, 여러 위젯을 넣을 때는 children 옵션을 사용한다. 

 

실행 화면은 아래와 같다.

 

 

 

이번에는 하얀 배경화면과 글자 색을 변경하려고 한다. 

 

플러터에서 가장 많이 사용하는 위젯 중 하나인 특정 공간을 책임지는 Container를 넣고

Container에 color를 넣으면 하얀색 배경으로 바뀐다. 

 

Text 안에 style 옵션을 추가하여 color와 fontSize를 변경한다. 

 

home : Container(
        color : Colors.white,
        child : Center(
          child : Text(
              'Hello\nFlutter',
              textAlign: TextAlign.center,
              style : TextStyle(color : Colors.blue, fontSize: 20),
          ),
      )
    )
    );

 

 

실행 결과는 다음과 같다. 

 

 

 

 

이번에는 앱에 스위치를 달고 화면을 갱신하는 방법을 알아보도록 할 것이다. 

그리고 머티리얼 디자인을 적용하려고 하는데, 머티리얼 디자인을 적용하려면 Scaffold 클래스를 이용한다.

 

머티리얼 디자인을 적용하기 위해 아래와 같이 MyApp 클래스를 수정한다.

 

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    var switchValue = false;
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      darkTheme: ThemeData.light(),
      home : Scaffold(
        body: Center(
          child: Switch(
            value: switchValue,
            onChanged: (value) {
              switchValue = value;
            }),
          ),
        ));
  }
}

 

 

 

실행 결과는 아래와 같이 스위치가 앱의 화면에 나타난 것을 볼 수 있다.

 

 

 

하지만, 현재 상태로는 스위치를 아무리 눌러도 화면에 변화가 없다. 

 

스테이트리스 위젯을 스테이트풀 위젯으로 바꾼다.

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyApp();
  }
}

class _MyApp extends State<MyApp> {
  var switchValue = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      darkTheme: ThemeData.light(),
      home : Scaffold(
        body: Center(
          child: Switch(
            value: switchValue,
            onChanged: (value) {
              setState(() {
                print(value);
                switchValue = value;
              });
            }),
          ),
        ));
  }
}

 

 

 

이제 스위치를 누르면 아래와 같이 바뀐 것이 화면에 나타날 것이다.

 

 

 

 

버튼을 좀 더 색다르게 변경해보려고 한다.

클릭 여부로 'Hello'와 'Flutter'를 번갈아가면서 화면에 나타나도록

조건문을 사용하여 코드를 수정한다.

 

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      darkTheme: ThemeData.light(),
      home : Scaffold(
        body: Center(
          child: ElevatedButton(
            child: Text('$test'),
            onPressed: () {
              if (test == 'Hello') {
                setState(() {
                  test = 'Flutter';
                });
              } else {
                setState(() {
                  test = 'Hello';
                });
              }
            })),
        ));
  }
}