[flutter] flutter app 작성 예제

0. 들어가기

-. flutter를 이용한 app 작성 연습

-. 구글 codelap 1부 예제: package 추가, 바뀌는 화면(stateful widget) 사용

1. package 이용하기

-. flutter(dart.js)의 패키지 import는 파이썬과 매우 비슷한 방식이다.

1. package 추가

1) pubspec.yaml 파일의 dependencies 단락 아래 행 추가만으로 의존성 추가됨. 

2) pip install ~~ 과 마찬가지로, android studio 우 상단의 Pub get 클릭으로 추가된 패키지들을 자동 설치 (다운로드) 해줌.

3) main.dart 상단에 import package_name 형식으로 입력

1) 모듈 행 추가 2) Pub get 클릭

원하는 패키지 자동 설치

3) 패키지 임포트 완료.

 

2. 패키지 매개변수화 + 사용

-. 패키지를 매개변수로 선언하고, 해당 출력을 화면에 띄운다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random(); //wordPair 매개변수로 Word.Pari.random() 함수 설정
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text(wordPair.asPascalCase), //Text 내부 변수를 'Hello world' --> wordPair.asPascalCase라는 함수 출력으로 변경
        ),
      ),
    );
  }
}

 

2. Stateful 위젯 추가

-. flutter의 화면 표시 위젯은 stateless widget(화면 표시 후 고정)과 stateful widget(화면 변경 가능)의 두가지가 있다. 함수를 이용해 화면 변경을 위해선 stateful widget을 사용해야 한댄다. (자세한 건 나중에)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //final wordPair = WordPair.random(); //wordPari 매개변수로 Word.Pari.random() 함수 설정
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          //child: Text(wordPair.asPascalCase), //Text 내부 변수를 'Hello world' --> wordPair.asPascalCase라는 함수 출력으로 변경
          child: RandomWords(), //Randomwords 'StatefulWidget' 호출
        ),
      ),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  // TODO Add build() method
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}