[Flutter/Project](Instagram Clone) appBar 및 아이콘

 

---

appBar: CupertinoNavigationBar() 

appBar: AppBar 대신

appBar: CupertinoNavigationBar() 를 적용하는 이유는

기본적으로 MaterialApp은 안드로이드 디바이스에 실행했을 때

appbar의 타이틀이 좌측으로 정렬되며 아이폰은 중앙으로 정렬된다.

똑같은 앱바를 적용하기위해 사용한다.

---

mainAxisSize: MainAxisSize.min 의 사용

Row() 디폴트로 그 자리를 전부 차지하게 되어있다.

Row()의 사이즈를 최소한으로 하기위해 사용.

 

적용 전

mainAxisSize: MainAxisSize.min 적용 후

---

소스코드 및 pubspec.yaml

다운받은 아이콘을 사용하기 위한 pubspec.yaml 파일 설정

// feed_screen.dart

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

class FeedScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /*
      안드로이드 + 아이폰에 똑같은 appBar를 적용하기 위해서
      CupertinoNavigationBar 사용
      */
      appBar: CupertinoNavigationBar(
        // leading: 네비게이션 바의 좌측 시작부분
        leading: IconButton(
          onPressed: null,
          icon: Icon(
            Icons.camera_alt,
            color: Colors.black87,
          ),
        ),
        // middle: 네비게이션 바의 중간부분
        middle: Text(
          'jerrystagram',
          style: TextStyle(fontFamily: 'VeganStyle', color: Colors.black87),
        ),
        // trailing: 네비게이션 바의 우측 끝부분
        trailing: Row(
          /*
          Row() 가로 배치. 왼쪽부터 하나씩 쌓임.
          Row()는 디폴트로 그 자리를 전부 차지하게 되어있다.
          */
          // mainAxisSize: Row의 사이즈를 최소한으로 작게함.
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            IconButton(
              onPressed: null,
              icon: ImageIcon(
                AssetImage('assets/images/actionbar_camera.png'),
                color: Colors.black87,
              ),
            ),
            IconButton(
              onPressed: null,
              icon: ImageIcon(
                AssetImage('assets/images/direct_message.png'),
                color: Colors.black87,
              ),
            ),
          ],
        ),
      ),
      body: ListView.builder(
        itemBuilder: feedListBuilder,
        itemCount: 20,
      ),
    );
  }

  Widget feedListBuilder(BuildContext context, int index) {
    return Container(
      // itemCount 갯수만큼 index에 0부터 하나씩 넣어 accents 리스트의 색상을 가져옴
      color: Colors.accents[index % Colors.accents.length],
      height: 100,
    );
  }
}