[Flutter] Flutter App (1)

 

 

* app 만들어보기

- Stateless 위젯 : 모든 속성(변수)들이 변하지 않음. 모든 값들은 final 선언

- Scaffold 위젯 : appBar, title, body property 제공

 

- StatelessWidget : 단 한번만 Build 과정 발생. 한 번 그려진 화면은 계속 유지되며, 성능상 장점

- StatefulWidget : state(데이터 상태) 포함하며, setState(데이터 변화) 발생할 때마다 다시 Build 과정 발생

                        ▶ 동적 화면 쉽게 구현 가능

 

//pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  english_words: ^3.1.0  //추가

// lib/main.dart
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
  }
}

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

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      //itemBuilder : 생성된 단어마다 한 번씩 호출되고 각 단어를 _buildRow()할 때 하나의 행에 배치
      //itemBuilder에는 두 개의 매개 변수 BuildContext와 row iterator 전달됨
      //iterator i는 0부터 시작해 함수가 호출 될 때마다 매번 증가. --> 무한 스크롤 가능케함.
      //짝수 행의 경우 단어를 하나의 행에 배치
      //홀수 행의 경우 Divider() 호출 --> 구분선 배치
      itemBuilder: (context, i) {
        if(i.isOdd) return Divider();

        //i를 2로 나눈 몫 반환
        final index = i ~/ 2;

        //단어 목록인 _suggestions의 길이보다 index가 더 크면 단어 10개 더 생성하고 단어 목록에 추가
        if(index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }

        return _buildRow(_suggestions[index]);
      },
    );
  }

  //Flutter에서의 ListView는 ListTile들로 구성됨.
  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

 

 

 

---

https://cording-cossk3.tistory.com/92

[Flutter] Flutter App (2)

https://cording-cossk3.tistory.com/93

[Flutter] Flutter App (3)

]https://cording-cossk3.tistory.com/94

[Flutter] Flutter App (4)