[Flutter] Write your first Flutter app, part 1

원하는 경로에서 

flutter create startup_namer

를 입력하고 엔터를 누릅니다. 프로젝트가 만들어집니다.

일단 

flutter run

을 하고 chrome (2) 으로 실행시켜 봅니다.

웹에서도 잘 실행됩니다 ㅎㅎ

flutter pub add english_words

english_words 를 사용해봅니다.

final wordPair = WordPair.random();

,
            Text(wordPair.asPascalCase)

다시 실행해봅니다.

flutter run 혹은 실행 시켜 놓은 상태라면,  r 을 입력하고 엔터를 칩니다.

하단에 랜덤으로 보여지는 단어가 있음을 확인할 수 있습니다.

맨 아래에  다음과 같이 추가합니다.

아래와 같이 변경합니다.

class RandomWords extends StatefulWidget {
  const RandomWords({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _RandomWordsState();
}

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

build 함수 위로 올려줍니다.

build 함수 내부에서 쓸 거 거든요..

children: <Widget>[RandomWords()],

실행해봅니다

class _RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18);
  @override
  Widget build(BuildContext context) {
    // final wordPair = WordPair.random();
    // return Text(wordPair.asPascalCase);
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        if (i.isOdd) return const Divider();
        final index = i ~/ 2;
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return ListTile(
          title: Text(
            _suggestions[index].asPascalCase,
            style: _biggerFont,
          ),
        );
      },
    );
  }
}

그냥 사용하려고 했었는데... 깔끔하게 build 고쳐줍니다.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Startup Name Generator'),
        ),
        body: const Center(
          child: RandomWords(),
        ),
      ),
    );
  }
}

끝!

 

References

https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1?continue=https%3A%2F%2Fdevelopers.google.com%2Flearn%2Fpathways%2Fintro-to-flutter%23codelab-https%3A%2F%2Fcodelabs.developers.google.com%2Fcodelabs%2Ffirst-flutter-app-pt1#6 

Write your first Flutter app, part 1  |  Google Codelabs