하단 아이콘 클릭시 아이콘 배경 색 및 상단의 이미지 변경

main.dart

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: kPrimaryColor,
        scaffoldBackgroundColor: kPrimaryColor,
      ),
      home: ShoppingCartPage(),
    );
  }
}

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

  @override
  _ShoppingCartPageState createState() => _ShoppingCartPageState();
}

class _ShoppingCartPageState extends State<ShoppingCartPage> {
  int selectedIconNum = 0;
  List<String> selectPic = [
    "assets/p1.jpeg",
    "assets/p2.jpeg",
    "assets/p3.jpeg",
    "assets/p4.jpeg",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          _productPic(),
          _productSelector(),
        ],
      ),
    );
  Widget _productSelector() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
        //버튼에 자신의 번호, 선택된 번호, 아이콘, setState를 넘겨줌
          ProductIcon(0, selectedIconNum, Icons.directions_bike, changeIcon),
          ProductIcon(1, selectedIconNum, Icons.motorcycle, changeIcon),
          ProductIcon(
              2, selectedIconNum, CupertinoIcons.car_detailed, changeIcon),
          ProductIcon(3, selectedIconNum, CupertinoIcons.airplane, changeIcon),
        ],
      ),
    );
  }

  Widget _productPic() {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: AspectRatio(
        aspectRatio: 5 / 3,
        child: Image.asset(
        //setState로 현재 선택된 num을 받아와 리스트에서 이미지를 찾음
          selectPic[selectedIconNum],
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  void changeIcon(int num) {
  //components의 버튼에 함수를 넘겨 main에서 state를 변경
    setState(() {
      selectedIconNum = num;
    });
  }
}

components/product_icon.dart

import 'package:flutter/material.dart';

import '../constants.dart';

class ProductIcon extends StatelessWidget {
  final int productNum;
  final int selectedIconNum;
  final IconData mIcon;
  final Function changeIcon;

  const ProductIcon(
  //main에서 받아와야하는 값 정의
    this.productNum,
    this.selectedIconNum,
    this.mIcon,
    this.changeIcon, {
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 70,
      height: 70,
      decoration: BoxDecoration(
      // 선택된 버튼, 선택안된 버튼 배경색 삼항 연산자로 정의
        color: productNum == selectedIconNum ? kAccentColor : kSecondaryColor,
        borderRadius: BorderRadius.circular(20),
      ),
      child: IconButton(
        onPressed: () {
        //받아온 change함수에 선택된 num 보내서 main에서 state 변경
          changeIcon(productNum);
        },
        icon: Icon(
          mIcon,
          color: Colors.black,
        ),
      ),
    );
  }
}

참고

https://www.youtube.com/watch?v=adA3vPVlh4Q&list=PL93mKxaRDidG6CYF5M_RbOXGkAGLtM_Ct&index=19

 

728x90

Container

html의 div 역할

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber, // 배경색 변경
    );
  }
}

MaterialApp

Container의 한종류로서 안드로이드 친화적인 디자인으로 개발한다는 것을 알려줌 이와 대비로 ios 친화적인 cupertinoapp이 있음

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp();
  }
}

Scaffold

기본 뼈대를 가지고 있음 - Appbar, bottomNavigationBar ...

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // Android app 만들꺼에요
      home: Scaffold( // 기본 구조를 들고 있어요
        body: Text("hello"),
      ),
    );
  }
}

위의 경우 안드로이드 상단 바 영역을 제대로 표현 못하기에 안전한 영역에만 그리도록 해줄 필요가 있음 -> SafeArea

Scaffold 끝에 커서를 두고 alt(option) + enter → wrap with widget 을 사용하면 쉽게 바꿀 수 있음

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // Android app 만들꺼에요
      home: SafeArea(
        child: Scaffold( // 기본 구조를 들고 있어요
          body: Text("hello"),
        ),
      ),
    );
  }
}

AppBar

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // Android app 만들꺼에요
      home: SafeArea(
        child: Scaffold( // 기본 구조를 들고 있어요
          appBar: AppBar( //appbar를 그려줌
            backgroundColor: Colors.blue,
          ),
          body: Text("hello"),
        ),
      ),
    );
  }
}

appBar: AppBar(
  backgroundColor: Colors.blue,
  title: Text("First app"),
  leading: Icon(Icons.menu), //appbar의 햄버거 버튼추가
),

FloatingActionButton

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // Android app 만들꺼에요
      home: SafeArea(
        child: Scaffold( // 기본 구조를 들고 있어요
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: Text("First app"),
          ),
          body: Text("hello"),
          floatingActionButton: FloatingActionButton( //하단 floating 버튼
            onPressed: () {  },
            child: Text("button"),
          ),
        ),
      ),
    );
  }
}

BottomNavigationBar

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // Android app 만들꺼에요
      home: SafeArea(
        child: Scaffold( // 기본 구조를 들고 있어요
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: Text("First app"),
          ),
          body: Text("hello"),
          floatingActionButton: FloatingActionButton(
            onPressed: () {  },
            child: Text("button"),
          ),
          bottomNavigationBar: BottomNavigationBar( // 하단 네비게이션바
            backgroundColor: Colors.yellow, 
            items: [ // 네비게이션 바에 들어갈 항목
              BottomNavigationBarItem(
                  label:"hello",
                  icon: Icon(
                    Icons.access_alarm_rounded,
                  )),
              BottomNavigationBarItem(
                  label:"hello",
                  icon: Icon(
                    Icons.access_alarm_rounded,
                  )),
            ],
          ),
        ),
      ),
    );
  }
}
728x90

'Study > Flutter' 카테고리의 다른 글

[Flutter] Factory 패턴  (0) 2021.07.13
[Flutter] Provider pattern (bloc -> provider )  (0) 2021.06.16
[Flutter] Stateful widget  (0) 2021.06.14

+ Recent posts