Part2. 3강. 인스타 하단 바 만들기 숙제

[민경철]

BottomNavigationBarItem을 숙제 주신 것 처럼 2개 아이콘만 넣었을때는 
style.dart에서 selectedItemColor 로 지정한 것이 잘 반영이 되는데

BottomNavigationBarItem을 실제 인스타처럼 5개 넣어봤더니 맨 처음 아이템만 검정색으로 색이 반영되는데
그냥 제 컴퓨터 오류일까요?

[codingapple]

코드를 올려주시면 됩니다

[민경철]

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

void main() {
  runApp(MaterialApp(theme: theme1, home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var tab = [0, 1];

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: TextButton(
              style: TextButton.styleFrom(textStyle: TextStyle(fontSize: 25)),
              onPressed: () {},
              child: Text('Instagram')),
          actions: [
            IconButton(onPressed: () {}, icon: Icon(Icons.add_box_outlined)),
            IconButton(onPressed: () {}, icon: Icon(Icons.message)),
            IconButton(onPressed: () {}, icon: Icon(Icons.add_call))
          ],
        ),
        body: Text('ㅎㅇ'),
        bottomNavigationBar: BottomNavigationBar(items: [
          BottomNavigationBarItem(icon: Icon(Icons.home_outlined), label: "1"),
          BottomNavigationBarItem(icon: Icon(Icons.shopping_bag_outlined), label: '2'),
          BottomNavigationBarItem(icon: Icon(Icons.remove_red_eye), label: '3'),
          BottomNavigationBarItem(icon: Icon(Icons.play_circle), label: '4'),
          BottomNavigationBarItem(icon: Icon(Icons.account_circle), label: '5'),
        ]));
  }
}

main.dart 입니다

import 'package:flutter/material.dart';

var theme1 = ThemeData(
  appBarTheme: AppBarTheme(
    elevation: 1,
    color: Colors.white,
    actionsIconTheme: IconThemeData(color: Colors.black, size: 25),
    titleTextStyle: TextStyle(fontStyle: FontStyle.italic , color: Colors.black, fontSize: 25),
  ),
  textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(
      primary: Colors.black,
      backgroundColor: Colors.white)
  ),
  bottomNavigationBarTheme: BottomNavigationBarThemeData(
    elevation: 3,
    backgroundColor: Colors.white,
    selectedItemColor: Colors.black
  ),
);

style.dart 입니다

[codingapple]

스타일주는 파일에 unselectedItemColor도 추가합시다

[글쓴이]

글