[Flutter] Flutter App (3)

 

 

 

 

* 좋아요 목록 보기

 

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',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.white,
      ),
      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'),
        //actions : title 다음 행에 표시 할 위젯 목록 (일반적으로  IconButton 사용)
        //onPressed : 버튼을 탭하거나 활성화 시 호출되는 콜백. null로 설정시 버튼 비활성화
        actions: <Widget>[
          IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }

  //IconButton 탭 시 호출되는 콜백 함수
  void _pushSaved() {
    //Navigator : 화면 전환하거나 현재 화면 위에 대화 상자 표시 가능
    //of(Containing class: Navigator) : 주어진 context를 둘러싸는 이 클래스의 가장 가까운 인스턴스의 상태
    //push : navigator에 주어진 route를 푸시
    //MaterialPageRoute : android의 intent처럼 화면 전환시 사용
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        builder: (BuildContext context) {
          return LikeRoute(_saved, _biggerFont);
        },
      ),
    );
  }

  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);
          }
        });
      },
    );
  }
}

//전환될 화면에 표시할 ListView
class LikeRoute extends StatelessWidget {
  final Set<WordPair> _saved;
  final TextStyle _biggerFont;

  LikeRoute(this._saved, this._biggerFont);

  @override
  Widget build(BuildContext context) {
    final Iterable<ListTile> tiles = _saved.map(
        (pair) => ListTile(title: Text(
          pair.asPascalCase,
          style: _biggerFont,
        ),
        ),
    );

    //divideTiles : 각 타일 사이에 1pixel 테두리 추가
    final List<Widget> divided = ListTile.divideTiles(
      context: context,
      tiles: tiles,
    ).toList();

    return Scaffold(
      appBar: AppBar(
        title: Text('Saved Suggestions'),
      ),
      body: ListView(children: divided),
    );
  }
}

 

 

---

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

[Flutter] Flutter App (1)

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

[Flutter] Flutter App (2)

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

[Flutter] Flutter App (4)