Flutter - 코딩마스터하기|피드스크린 만들기

피드스크린 만들기

 

리스트 뷰로 피드스크린 페이지 만들기

지난 번에 만든 feed_screen에 appBar 밑에 body에 ListView.builder을 만들어 준다. 그 안에 itemBuilder을 채워줘야 하는데 따라 가보면 (context, index){}의 형식으로 채워줘야 한다. 이것을 하단에 메소드로 만들어도 되고 바로 써줘도 된다. 지금은 메소드로 만들어 줘 보자. Widget로 feedListBuilder을 만들어 주고, return에 Container을 준다. color에는 Colors.accents를 준다. 이게 리스트로 되어있어 색이 순서대로 되어있고,[index]를 넣어서 숫자가 바뀌면 색이 바뀌게 나온다. 그래서 그안에 색을 반복 시키기 위해서 index % Colors.accents.length 로 나머지 값으로 해주면 돌아가면서 나온다. height는 100으로 준다. 그리고 ListView.Builder에 itemCounter을 30을 줘서 갯수를 제한시킨다.

---

class FeedScreen extends StatelessWidget {
  const FeedScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(
          child: Text(
            'instagram',
            style: TextStyle(
              fontFamily: 'VeganStyle',
              color: Colors.black87
            ),
          ),
        ),
      ),
      body: ListView.builder(itemBuilder: feedListBuilder,itemCount: 32,),
    );
  }
  Widget feedListBuilder(BuildContext context, int index){
    return Container(
      color: Colors.accents[index % Colors.accents.length], //Colors.accents 이게 리스트로 되어있음
      height: 100,
    );
  }
}

---

앱바 로고 가운데로 옮기기.

IOS는 가운데있고 안드로이드는 왼쪽에 있어서 가운데로 만들어 줘야함.

원래 Center로 임으로 변경해줬는데 Cupertino로 변경해주면 된다. appBar를 CupertinoNavigationBar로 변경해준다. Text는 Center을 제거하고 middle 옵션으로 변경해준다. 그리고 leading 옵션에 IconButton을 주고 onPressed는 null, ㅑicon에는 Icon으로 준다. 이때 Icons.camera.alt로 줘도 되고 CupertinoIcons.photo_camera_solid로 줘도 된다. 아이폰과 똑같은 모양으로 하고싶다면 후자 처럼 주면 된다. 또는 이미지를 직접 받아서 경로를 지정해줘서 하면 된다. 방법은 assets 폴더를 만들고 그 안에 images를 만들고 그 안에 이미지를 넣어준다. 그리고 pubspec.yaml에 assets 부분을 주석을 제거하고 경로를 - assets/images/라고 지정해주면 된다. 경로만 해줘도 되고, 직접 파일까지 해줘도 된다. 그래서 이미지를 넣는 부분은 여러가지를 해보기 위해서 trailing에 Row에 넣어주면 된다. children에 IconButton을 만들어준다. 그리고 icon 옵션에 ImageIcon을 만들고 그 안에 AssetImage('경로')를 넣어주면 이미지가 들어간다. 하지만 Row로 만들경우 해당 부분의 가로부분을 전체 차지하므로 mainAxisSize를 주면 된다. MainAxisSize.min을 주면 최소한의 사이즈만을 가지고 우측으로 옮겨지는 것을 알 수 있다.

---

class FeedScreen extends StatelessWidget {
  const FeedScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        leading: IconButton(
          onPressed: () {},
          icon: const Icon(
            CupertinoIcons.photo_camera_solid,
            color: Colors.black87,
          ),
        ),
        middle: const Text(
          'instagram',
          style: TextStyle(fontFamily: 'VeganStyle', color: Colors.black87),
        ),
        trailing: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(
              onPressed: () {},
              icon: const ImageIcon(
                AssetImage('assets/images/actionbar_camera.png'),
              ),
            ),
            IconButton(
              onPressed: () {},
              icon: const ImageIcon(
                AssetImage('assets/images/actionbar_camera.png'),
              ),
            ),
          ],
        ),
      ),
      body: ListView.builder(
        itemBuilder: feedListBuilder,
        itemCount: 32,
      ),
    );
  }

  Widget feedListBuilder(BuildContext context, int index) {
    return Container(
      color: Colors.accents[index % Colors.accents.length],
      //Colors.accents 이게 리스트로 되어있음
      height: 100,
    );
  }
}

---

Post 위젯 분리

ListView.builder 에서 Container를 Post가 있는 부분이므로 위젯으로 분리해줄 것이다.  return을 Container 부분을 드래그한 후 refactor에서 Flutter Widget로 해주면 하단에 위젯이 생긴다. 그리고 여기서는 index 값이 필요하므로 상단에 final int index를 선언해주고 key를 적는 부분에 (와 { 사이에 this.index를 넣어주면 된다. 그리고 이 부분을 잘라내기 한후 lib 폴더에 widgets 폴더를 만들어 주고 post.dart를 생성해 준 후 붙여 넣어 준다. 그리고 import만 시켜주면 된다.

---

class Post extends StatelessWidget {

  final int index;

  const Post(this.index,{
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.accents[index % Colors.accents.length],
      //Colors.accents 이게 리스트로 되어있음
      height: 100,
    );
  }
}

  Widget feedListBuilder(BuildContext context, int index) {
    // return Container(
    //   color: Colors.accents[index % Colors.accents.length],
    //   //Colors.accents 이게 리스트로 되어있음
    //   height: 100,
    // );
    return Post(index);
  }

---