플러터 튜토리얼 앱

//HelloWorld 띄우기

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Appbar Text'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

외부패키지 이용하기
pubspec.yaml에서 dependencieslist에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  english_words: ^3.1.0

상단에 Packages get 클릭: 패키지를 내 프로젝트에 가져오게 됩니다.
Packages get을 수행하는 동안 pubspec.lock파일이 자동생성될 것입니다.



Stateful 위젯 추가하기
stateless위젯은 불변합니다. 프로퍼티가 변경될 수 없고 모든 값이 최종값입니다.

Stateful위젯은 생명주기동안 상태가 변경될 수 있는 상태를 유지합니다.
Stateful위젯을 구현하려면 적어도 2개의 클래스가 필요합니다.
1)State클래스
2)State클래스의 인스턴스를 생성하는 클래스인 StatefulWidget클래스, StatefulWidget클래스는 자신은 불변하지만, 
State클래스는 위젯의 생명주기동안 지속됩니다.



ListView 무한 스크롤링 만들기
RandomWordsState를 확장하여 단어쌍의 목록을 생성하고 화면에 표시하도록 할 예정

1.제안하는 단어 쌍을 저장하기 위해 _suggestions목록을 RandomWordsState클래스에 추가하세요.
또한 폰트 사이즈를 크게 만들기 위해 _biggerFont 변수를 추가하세요.

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

*Dart언어에서는 _(언더스코어)를 식별자의 prefix로 붙이면 privacy가 강제 적용됩니다.

2.RandomWordsState 클래스에 _buildSuggestions()함수를 추가하세요.

Widget _buildSuggestion(){
    return ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: /*1*/(context, i){
        	if(i.isOdd) return Divider();/*2*/

        	final index = i~/2;/*3*/
            if(index >= _suggestions.length){
            	_suggestions.addAll(generateWordPairs().take(10));/*4*/
            }
        return _buildRow(_suggestions[index]);
    })
}

/*1*/ itemBuilder콜백은 제안된 단어 쌍 마다 한번씩 호출되며 각 제안을 ListTile행에 위치해 줍니다.
짝수행의 ListTile함수는 단어 쌍에 대한 ListTile행을 추가합니다. 홀수 행의 Divider함수는 Divider위젯을 추가하여 항목을 시각적으로 분리합니다.
/*2*/ ListView 각 행 앞에 1 픽셀 높이의 구분선 위젯을 추가합니다.
/*3*/ i ~/ 2 표현식은 i에서 2를 나누고 나머지 정수를 리턴합니다. 예를들면, 1,2,3,4,5는 0,1,1,2,2가 됩니다.
이것은 ListView에서 Divider 위젯을 제외한 단어 쌍의 실제 숫자를 계산합니다.
/*4*/ 사용 가능한 단어 패어링이 끝났으면 10개를 더 생성하고 제안 목록에 추가합니다.

_buildSuggestions() 함수는 각 단어 쌍마다 _buildRow()를 호출합니다.
이 함수는 ListTile안에서 새로운 쌍을 표시 하므로, 다음 단계에서 행을 더욱 매력적으로 만들 수 있습니다.

3._buildRow()함수를 RandomWordsState에 추가하세요.

Widget _buildRow(WordPair pair){
    return ListTile(
        title: Text(
            pair.asPascalCase,
            style: _biggerFont,
        ),
    );
}

4.RandomWordsState 클래스에서 단어 생성 라이브러리를 직접 호출하기 보다는 _buildSuggestions()를
사용하도록 build() 메소드를 업데이트 하세요.(Scaffold는 기본 Material 디자인 비주얼 레이아웃을 구현합니다.)

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

5.MyApp클래스에서 RandomWords 위젯이 되도록 title과 home을 변경하여, build()메소드를 갱신하세요.


참조 :

https://blog.soobinpark.com/175?category=777198