[Flutter/Project] 첫 플러터 앱 따라 만들기

---

---

소스코드 및 pubspec.yaml

// main.dart

import 'package:flutter/material.dart';
import 'word_list_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WordListPage(),
    );
  }
}

// word_list_page.dart

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/favorite_list_page.dart';

// Set - 중복을 허용하지 않는 리스트
// _(언더바) - 현재 파일에서만 접근 가능한 변수명
Set<WordPair> _saved = Set<WordPair>();

class WordListPage extends StatelessWidget {
  const WordListPage({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello"),
        actions: <Widget>[
          IconButton(
              // 앱서랍 아이콘 생성
              icon: Icon(Icons.star),
              onPressed: () {
                print("click actionbutton");
                // 페이지 이동
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (context) {
                  /* Set으로 설정된 변수 saved를 List로 변경해서 파라미터 전달 */
                  return FavoriteListPage(_saved.toList());
                }));
              })
        ],
      ),
      body: RandomWords(),
    );
  }
}

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

class _RandomWordsState extends State<RandomWords> {
  // 비어있는 List 생성
  List<WordPair> words = [];

  @override
  Widget build(BuildContext context) {
    // itemBuilder 를 이용해서 ListView 위젯 생성
    return ListView.builder(itemBuilder: (BuildContext context, int index) {
      if (index >= words.length) words.addAll(generateWordPairs().take(10));

      return _getRow(words[index]);
    });
  }

  Widget _getRow(WordPair wordPair) {
    bool _isAlreadySaved = _saved.contains(wordPair);
    return Column(
      // cross - 가로(좌,우)
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        // 대괄호 - 리스트를 뜻함
        ListTile(
          onTap: () {
            setState(() {
              // setState - state 가 다시 실행됨.
              // builder가 다시 실행됨.
              if (_isAlreadySaved) {
                // saved 안에 wordPair 가 들어가 있으면 실행
                _saved.remove(wordPair) /*saved에 영단어가 존재하면 saved 에서 삭제*/;
              } else {
                _saved.add(wordPair) /*saved에 영단어가 없으면 saved 에 추가*/;
              }
            });
            print(_saved.toString());
          },
          title: Text(
            wordPair.asCamelCase,
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
          subtitle: Text(
            // Text: 아래에 서브타이틀 생성
            wordPair.asCamelCase,
          ),
          trailing: Icon(
            // trailing - title: 의 오른쪽에 위치하는 위젯
            // ? - if 문과 같은 맥락. true : false
            _isAlreadySaved ? Icons.favorite : Icons.favorite_outline,
            color: Colors.redAccent,
          ),
          leading: Icon(
            // leading - title: 의 왼쪽에 위치하는 위젯
            _isAlreadySaved ? Icons.favorite : Icons.favorite_outline,
            color: _isAlreadySaved ? Colors.redAccent : Colors.grey,
          ),
        ),
        Divider(
          // Divider - (사전정의)분할기
          thickness: 1 /*선의 두깨*/,
          color: Colors.grey[300] /*색상[진하기]*/,
          height: 5 /*높이*/,
          indent: 10 /*시작 지점의 여백*/,
          endIndent: 20 /*끝 지점의 여백*/,
        )
      ],
    );
  }
}

// favorite_list_page.dart

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

class FavoriteListPage extends StatelessWidget {
  // final - 클래스의 인스턴스가 생성되면 final 변수에 데이터를 전달해줘야함.
  // null 값은 의미가 없는 클래스 일 때 사용
  final List<WordPair> favorites;
  // 생성자 - favorites 파라미터를 무조건 받아옴
  const FavoriteListPage(this.favorites, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("favorite list page"),
      ),
      body: ListView.separated(
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(
              favorites[index].asCamelCase,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
          );
        },
        itemCount: favorites.length,
        separatorBuilder: (BuildContext context, int index) {
          return Divider(
            // Divider - (사전정의)분할기
            thickness: 1 /*선의 두깨*/,
            color: Colors.grey[300] /*색상[진하기]*/,
            height: 5 /*높이*/,
            indent: 10 /*시작 지점의 여백*/,
            endIndent: 20 /*끝 지점의 여백*/,
          );
        },
      ),
    );
  }
}

 

참고 : 유튜브 더코딩파파