[Flutter] 플러터 앱 예제 가게 이름 선택하기 (상) (map 활용하기)

안녕하세요 사랑니 뽑기 전에 긴장된 마음을 가라앉히고자 만든 간단한 가게 이름 선택 예제 앱을 만들어 보았습니다. 제작하면서 머릿속에 흐트러져있는 개념도 정리하고 정보도 나누고 싶어 작성하는 것이니 부족한 점이 있다면 피드백 주셔도 괜찮습니다. 

 

우선 완성된 앱은 이렇습니다. 각자 취향에 따라 좋아하는 이미지와 텍스트를 입력하셔도 됩니다!

우선 StatefulWidget으로 foodList라는 List를 하나 만들어주었습니다.

List foodList = [
  {
    "title": "군침이 마카롱",
    "price": 3900,
    "image":
        "https://t1.daumcdn.net/cfile/tistory/99758C355F7F04AA25",
    "thx": "반갑습니다."
  },
  {
    "title": "햄깅이 가게",
    "price": 1900,
    "image":
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYxaq4udWruQnbE2t4mcoeZTP6h4PYsjMO9g&usqp=CAU",
  "thx": "반갑습니다."
  },
  {
    "title": "루시우 가게",
    "price": 7900,
    "image": "https://t1.daumcdn.net/cfile/tistory/267ACB4E57ADC00536",
    "thx": "반갑습니다."
  }
];

List안에 Map타입으로 불러올 정보들을 만들었습니다. 나중에 ui를 제작할때 key로 접근해 value를 가져와 화면에 뿌릴 생각으로 이렇게 제작을 했습니다.  image 같은 경우에는 네트워크 이미지 widget을 사용해 이미지를 가져올 거라 해당 이미지에 url을 value 형태로 저장했습니다. 각자 취향에 따라 이미지를 추가해 이미지의 위치를 value값으로 주어도 무방합니다.

이제 Ui를 그리기위해 Listview.sepatated를 불러오기 전 , Listview.sepatated의 크기와 위치 지정하기 위해 Center에 child에 Container로 감싼 뒤 Container 크기를 width:400, height:400으로 지정해줍니다.

body: Center(
  child: Container(
    width: 400,
    height: 400,
    child: ListView.separated(
        separatorBuilder: (context, index) => SizedBox(
              height: 30,
            ),

Listview.sepatateds는 일반 builder와 다르게 separatorBuilder라는 것을 반환하게 됩니다.

발그림 죄송합니다(간격을 나타내는 참고이미지)

저는 separatorBuilder를 이용해 각 widget에 간격을 height:30 정도 주었습니다. 아시겠지만 이 builder을 좀 더 활용하게 된다면 divider나 여러 가지 Widget으로 좀 더 완성도 있는 앱을 제작하실 수 있습니다. 다음으로 각각 가게 이름을 그려야하는데요. 여러 가지 방법이 있겠지만 저는 Stack이라는 Widget을 사용해 그렸습니다. 아시겠지만 StackWidget은 Widget위에 Widget을 그릴 수 있는데요. 쌓는다고 생각하시면 쉽게 이해되실 것 같습니다. 

Stack(
  children: [
    ClipRRect(
        borderRadius: BorderRadius.circular(60),
        child: Container(
            width: 80,
            height: 80,
            child: Image.network(
              foodList[index]["image"],
              fit: BoxFit.cover,
            ))),

image.nerwork안에 우리가 아까 작성한 List에 Map에 key에 value를 가져와야 하는데요. 지금은 image만 가져와야 하기 때문에 foodList에 index에 이미지가 저장되어있는 image 키로 접근하면 됩니다. 여유가 되신다면 위와 같은 방법으로 title과 price도 가져와보시기 바랍니다. 저는 다음 포스팅에서 이어 작성하겠습니다. 읽어주셔서 감사합니다.