[Flutter] Widgets - ListView.builder + Card

build 할때 ListView.builder 를 사용하는 샘플과 Card 위젯을 동시에 사용하는 간단한 샘플입니다.

Card의 옵션으로는 elevation, shape 를 사용한 샘플입니다.

 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('This is the Kimchi Recipes App'),
      ),
      body: ListView.builder(
        itemBuilder: (context, index){
          return buildRecipeCard(recipes[index]);
        },
        itemCount: recipes.length,
      )
    );
  }

  Widget buildRecipeCard(Recipe recipe) {
    return Card(
      elevation: 4.0,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.0)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Image.asset(recipe.imageUrl!),
            const SizedBox(height: 10.0,),
            Text(recipe.label!,
              style: const TextStyle(fontSize: 16.0, fontWeight: FontWeight.w700, fontFamily: 'palatino'),
            ),
          ],
        ),
      ),
    );
  }

 

 

화면 캡쳐 

 

 

 

 

화면의 상단은 고정하고 하단만 스크롤 처리하고 싶을때 사용하는 샘플 코드

 

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(recipe.label),
      ),
      body: Column(
        children: [
          SizedBox(
// 사진을 옆으로 전체 채우는 옵션          
            width: double.infinity,
            child: Image.asset(recipe.imageUrl)),
          const SizedBox(height: 10.0,),
          Text(recipe.label,
            style: const TextStyle(fontSize: 16.0, fontWeight: FontWeight.w700, fontFamily: 'palatino'),
          ),
          const SizedBox(height: 10.0,),
// Expanded 처리하면 아래 영역만 스크롤처리가능
// Text 에 더미 문자 넣고, itemCount값을 화면에 넘치게 설정하면 테스트 가능
// 예를들어 itemCount: 100, 이렇게 하고 테스트하면 
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              padding: const EdgeInsets.all(8.0),
              itemCount: 100,
              itemBuilder: (context, index){
                Ingredient ingred = recipe.ingredients[0];
              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('$index', textAlign: TextAlign.left,),
                  Text(ingred.name, textAlign: TextAlign.left,),
                  Text(ingred.unit, textAlign: TextAlign.left,),
                  Text('${ingred.quantity}', textAlign: TextAlign.left,),
                ],
              );
            }),
          )
        ],
      ),
    );