배민 UI 연습

사용한 UI

• Flexible() : width를 최대로 사용하되 Row에서는 flex인자를 정해주지 않으면 같은 비율로 나눠진다.

• Card() : 컨테이너처럼 박스형태이지만 elevation 옵션이 있다. child로 컨테이너를 주어 이미지 삽입.

• Container의 BoxDecoration
  카드와 같은값의 borderRadius를 주지 않으면 각진 컨테이너가 보이며, BoxFit.cover를 써도 이미지가 네모나게 보인다. BoxFit.filld을 사용할 것.

Row, Column, Card를 반복해서 사용하면 UI구성이 완료된다.

Flexible(
  child: Card(
    color: const Color.fromARGB(0, 0, 0, 0),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20.0),
      ),
      elevation: 1,
      child: Container(
        decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: const Color.fromARGB(255, 255, 255, 255),
      ),
        child: Image.asset("assets/milkit.png",
        fit: BoxFit.fill,
      ),
    ),
  ),
),

• CarouselSlider
  pub.dev에서 검색가능하다. 이미지 자동 슬라이드의 기능을 사용할 수 있고, autoPlay, Duration으로 Interval을 조절할 수 있다.
  아래와 같은 파라미터를 가진다.

CarouselSlider(
   items: items,
   options: CarouselOptions(
      height: 400,
      aspectRatio: 16/9,
      viewportFraction: 0.8,
      initialPage: 0,
      enableInfiniteScroll: true,
      reverse: false,
      autoPlay: true,
      autoPlayInterval: Duration(seconds: 3),
      autoPlayAnimationDuration: Duration(milliseconds: 800),
      autoPlayCurve: Curves.fastOutSlowIn,
      enlargeCenterPage: true,
      onPageChanged: callbackFunction,
      scrollDirection: Axis.horizontal,
   )
 )