Layouts in Flutter 정리 (2)

저번 글에 이어서 정리를 시작합니다.

 

Nesting rows and columns

 

layout 프레임워크는 row와 column이 사용자가 원하는 만큽 중첩해서 사용할 수 있습니다.

이 이미지에서 저기 빨간색 박스를 친 부분은 2개의 row로 구현되어있습니다. 아래 UI Tree를 확인하시죠.

ratings(평점) 변수 부분은 5개의 작은 별 아이콘으로 구성되어 있습니다.

var stars = Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    const Icon(Icons.star, color: Colors.black),
    const Icon(Icons.star, color: Colors.black),
  ],
);

final ratings = Container(
  padding: const EdgeInsets.all(20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      stars,
      const Text(
        '170 Reviews',
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.w800,
          fontFamily: 'Roboto',
          letterSpacing: 0.5,
          fontSize: 20,
        ),
      ),
    ],
  ),
);

그리고 평점 및에 icon들이 있는데 그것은 이렇게 구성되어 있습니다.

 

iconList 변수는 이렇게 정의되어 있습니다.

const descTextStyle = TextStyle(
  color: Colors.black,
  fontWeight: FontWeight.w800,
  fontFamily: 'Roboto',
  letterSpacing: 0.5,
  fontSize: 18,
  height: 2,
);

// DefaultTextStyle.merge() allows you to create a default text
// style that is inherited by its child and all subsequent children.
final iconList = DefaultTextStyle.merge(
  style: descTextStyle,
  child: Container(
    padding: const EdgeInsets.all(20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Column(
          children: [
            Icon(Icons.kitchen, color: Colors.green[500]),
            const Text('PREP:'),
            const Text('25 min'),
          ],
        ),
        Column(
          children: [
            Icon(Icons.timer, color: Colors.green[500]),
            const Text('COOK:'),
            const Text('1 hr'),
          ],
        ),
        Column(
          children: [
            Icon(Icons.restaurant, color: Colors.green[500]),
            const Text('FEEDS:'),
            const Text('4-6'),
          ],
        ),
      ],
    ),
  ),
);

그리고 이 모든걸 leftColumn 변수에서 담고 있습니다. 보시면 기사 내용 외에도 ratings와 iconList가 있습니다.

final leftColumn = Container(
  padding: const EdgeInsets.fromLTRB(20, 30, 20, 20),
  child: Column(
    children: [
      titleText,
      subTitle,
      ratings,
      iconList,
    ],
  ),
);

이 leftColumn은 Sizedbox안에 존재합니다. 이러한 중첩된 UI로 위에 있는 이미지가 이루어졌습니다. Image쪽으로 더 알아보려면 다음 링크를 따라가세요. https://docs.flutter.dev/development/ui/assets-and-images

 

Common layout widgets

Flutter는 풍부한 layout widget library를 가지고 있습니다. 여기 가장 일반적으로 사용하는 것들 중 몇개를 소개합니다. 전체 목록에 압도되기 보다는 가능한 한 빨리 만드는 것이 목적입니다. 다른 위젯에 대한 정보는 다음 링크들을 참고하세요.

https://api.flutter.dev/index.html

https://docs.flutter.dev/development/ui/widgets

Widget catalog

 

 

그 다음 내용들은 다 참고로 볼만한 내용들이라.. 그냥 직접 원문을 보는 것이 나을 수 있겠다는 생각으로 올리지 않는다.