[Flutter] Flutter App (4)

 

 

 

* Flutter 파일 구조

 

이쯤 되면 궁금해지는 Flutter project의 파일 구조...

파일들을 어떻게 나눠야 될지, 폴더명은 어떻게 하는 게 좋을지 궁금해서 찾아보았다.

 

 

Root Directory of App (프로젝트 생성 시 만들어지는 기본 폴더가 아님)

- Assets : 거의 대부분의 앱에서 반드시 사용해야 함. 로고나 사용자 지정 아이콘, 앱 전체에서 사용되는 정적 이미지 등..

             일단 이러한 요소들이 Assets 폴더에 저장되면 pubspec.yaml에 등록해줘야 함

 

- Fonts : Flutter에서 제공하는 기본 글꼴 사용 시 필요 없음

 

- Function : DB 사용 시 별도의 설정 필요한 경우 관련 함수 저장 → 실제 앱을 구동하는 코드와 구분 가능

 

 

lib Derectory

- models : 앱 전체에서 사용되는 global 데이터들을 저장하는 데 사용

 

- screens : 보이는 그 자체를 의미. 화면을 표현하는 코드

 

- widgets : 앱 전체에서 사용되는 위젯이 있는 경우 widgets 폴더에 배치.

 

- utils : 앱 전체에서 사용되는 모든 기능

 

- service : 응용 프로그램 외부에서 인터페이스 하는 모든 용도로 사용. API 등...

 

 

---

음.. widgets랑 screens의 의미가 헷갈린다..

아직은 Flutter에 대해 잘 몰라서 이게 맞는지는 모르겠지만 프로젝트 구조를 한번 나눠봤다.

 

//main.dart
import 'package:flutter/material.dart';
import 'package:flutter_app/widgets/random_words.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(),
    );
  }
}

 

// widgets/random_words.dart
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:flutter_app/widgets/like_route.dart';

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

 

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

//전환될 화면에 표시할 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/93

[Flutter] Flutter App (3)