[Flutter] Flutter App (2)

 

 

 

* 좋아요 만들기

 

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 List<WordPair> _suggestions = <WordPair>[];
  //Set 컬렉션 : 중복이 허용되지 않는 컬렉션.
  final Set<WordPair> _saved = Set<WordPair>();
  final TextStyle _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) {
    //행에 ListTitle 붙일 때, 동일한 WordPair 있는지 확인하는 변수
    final bool alreadySaved = _saved.contains(pair);

    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      //trailing : 제목 뒤에 표시 할 위젯 (일반적으로 아이콘 위젯)
      trailing: Icon(
        //alreadySaved가 true이면 Icons.favorite(꽉 찬 하트) 사용, false이면 favorite_border(빈 하트) 사용
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      //onTap : ListTile 탭하면 호출.
      onTap: () {
        //setState() : StatefulWidtet에서만 사용 가능. StatelessWidget은 모든 변수 불변이라 사용 불가
        //setState() 실행되면 해당 위젯이 가지고 있는 데이터가 변할 때, Widget build() 메서드 호출되면서 레이아웃 새로 그려짐
        setState(() {
          if(alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      },
    );
  }
}

 

 

---

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

[Flutter] Flutter App (1)

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

[Flutter] Flutter App (3)

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

[Flutter] Flutter App (4)