#006

row는 수평 레이아웃

여러개의 children을 가질 수 있다.

list는 수직 레이아웃

이것도 여러개의 children을 가질 수 있다.

decoration 추상화 클래스

추상클래스는 new를 하지 못한다. 어떤 것들의 부모이기 떄문에 , 추상화 시킨 클래스이다. 그럼 어떤 것들의 부모인지 추측을 해봐야된다. 모든 도형의 어머니 데코레이션

Decoration의 구현체는 BoxDecoration

컴파일 오류가 나지 않는다.

컨테이너 BoxDecoration 설정

Colum TextStyle

Recipe Pages 전체 코드

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

import '../components/recipe_title.dart';

class RecipePage extends StatelessWidget {
  const RecipePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appbar(),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: ListView(
          children: [
            RecipeTitle(),
            Row(
              children: [
                Container(
                  width: 60,
                  height: 80,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                    border: Border.all(color: Colors.black12),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.food_bank,
                        color: Colors.redAccent,
                        size: 30,
                      ),
                      Text(
                        "ALL",
                        style: TextStyle(color: Colors.black87),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  AppBar _appbar() {
    return AppBar(
      actions: [
        Icon(CupertinoIcons.search),
        SizedBox(width: 15),
        Icon(
          CupertinoIcons.heart,
          color: Colors.redAccent,
        ),
        SizedBox(width: 15),
      ],
    );
  }
}
JavaScript
복사

Coloum의 mainAxisalignment는 디폴트 값이 start

row의 디폴트 값은 센터

왼쪽정렬을 하고 싶다면??

row에 가운데 정렬을 하고 싶다면??

컬럼도 블락이다??

다른 속성 안에서는 블락 성질이 있는데

칼럼만의 속성은 블락이 아니고 인라인이다.

완성된 디자인 컴포넌트로 만들기

반복되는 구간, 컨테이너를 마우스 우클릭해서 위젯 메뉴 선택

위젯 이름은 파스칼 표기법

해당 코드블럭들을 잘라내기해서 파일로 따로 빼준다. 컴포넌트 안에 넣을 때는 이렇게 언더바 표기법을 지켜준다.

동일한 디자인만 뽑아낸다는 것은 컴포넌트화 되었다고 할 수 없다.

디자인이 만들어 지고 난 뒤에 상태변경이 없는 위젯은 stateless 위젯이라고 한다. 하지만, 그려지고 나서 클릭이라는 행위 같은거에 모양이 바뀌면은 stateful위젯이라고 하고, 그런 요소들에게는 final을 걸면 안된다. stateless 위젯의 변수는 전부 final로 해도 된다. 생성자를 사용할 때 중괄호를 사용해서 선택적 매개변수를 사용하도록 하낟. 키값을 적을 수 있으니까!

final로 선언하면 따로 어떤 타입인지 명시하지 않아도 된다.

파라메터를 꼭 넣도록 강제하고 싶다면, requried를 붙인다.

mIcon과 ${text}로 동적으로 변경이 되는 위젯이 완성이 되었다. 재사용가능한 위젯

이렇게 위젯을 만들고, 재사용하면 된다.

이렇게 재사용이 가능하다.

recipe_menu_item 전체코드

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

class RecipeMenuItem extends StatelessWidget {
  IconData mIcon;
  String text;

  RecipeMenuItem({required this.mIcon, required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 60,
      height: 80,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30),
        border: Border.all(color: Colors.black12),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            mIcon,
            color: Colors.redAccent,
            size: 30,
          ),
          Text(
            "${text}",
            style: TextStyle(color: Colors.black87),
          ),
        ],
      ),
    );
  }
}
JavaScript
복사