การใช้งาน Card Widget ร่วมกับ ListView ใน Flutter

Card(              
    child: Text('ข้อความใน card widget'),
);

class _HomeState extends State<Home> {
 
    // กำนหดตัวแปรข้อมูล articles
    late Future<List<Article>> articles;
   
    @override
    void initState() {
      print("initState"); // สำหรับทดสอบ
      super.initState(); 
      articles = fetchArticle();
    }     
 
    void _refreshData(){
      setState(() {
        print("setState"); // สำหรับทดสอบ
       articles = fetchArticle();
      });
    }
 
    @override
    Widget build(BuildContext context) {
        print("build");  // สำหรับทดสอบ
        return Scaffold(
            appBar: AppBar(
                title: Text('Home'),
            ),
            body: Center(
              child: FutureBuilder<List<Article>>( // ชนิดของข้อมูล
                future: articles, // ข้อมูล Future
                builder: (context, snapshot) {
                  print("builder");  // สำหรับทดสอบ
                  print(snapshot.connectionState); // สำหรับทดสอบ
                  // กรณีสถานะเป็น waiting ยังไม่มีข้อมูล แสดงตัว loading                  
                  if (snapshot.connectionState == ConnectionState.waiting){
                      return const CircularProgressIndicator();
                  }               
                  if (snapshot.hasData) {// กรณีมีข้อมูล
                      return Column(
                          children: [
                            Container( // สร้างส่วน header ของลิสรายการ
                              padding: const EdgeInsets.all(5.0),
                              decoration: BoxDecoration(
                                color: Colors.teal.withAlpha(100),
                              ),                  
                              child: Row(                  
                                children: [
                                  Text('Total ${snapshot.data!.length} items'), // แสดงจำนวนรายการ
                                ],
                              ),
                            ),
                            Expanded( // ส่วนของลิสรายการ
                                  child: snapshot.data!.length > 0 // กำหนดเงื่อนไขตรงนี้
                                  ? ListView.separated( // กรณีมีรายการ แสดงปกติ
                                          itemCount: snapshot.data!.length,
                                          itemBuilder: (context, index) {
                                              return ListTile(
                                                title: Text(snapshot.data![index].title),
                                              );
                                          },
                                          separatorBuilder: (BuildContext context, int index) => const Divider(),                    
                                    )
                                  : const Center(child: Text('No items')), // กรณีไม่มีรายการ
                              ),
                          ],
                        );
                  } else if (snapshot.hasError) { // กรณี error
                    return Text('${snapshot.error}');
                  }
                  // กรณีสถานะเป็น waiting ยังไม่มีข้อมูล แสดงตัว loading
                  return const CircularProgressIndicator();                  
                },
              ),  
            ),          
            floatingActionButton: FloatingActionButton( // ปุ่มทดสอบสำหรับดึงข้อมูลซ้ำ
                onPressed: _refreshData,
                child: const Icon(Icons.refresh),
            ),
        );
    }
 
}

snapshot.data![index].title

Article article = snapshot.data![index];

Expanded( // ส่วนของลิสรายการ
    child: snapshot.data!.length > 0 // กำหนดเงื่อนไขตรงนี้
    ? ListView.separated( // กรณีมีรายการ แสดงปกติ
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              Article article = snapshot.data![index];
              return ListTile(
                title: Text(article.title),
              );
            },
            separatorBuilder: (BuildContext context, int index) => const Divider(),                    
      )
    : const Center(child: Text('No items')), // กรณีไม่มีรายการ
),

Expanded( // ส่วนของลิสรายการ
    child: snapshot.data!.length > 0 // กำหนดเงื่อนไขตรงนี้
    ? ListView.separated( // กรณีมีรายการ แสดงปกติ
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              Article article = snapshot.data![index];

              Widget card; // สร้างเป็นตัวแปร
              card = Card(
                child: ListTile(
                  title: Text(article.title),
                ),
              );
              return card;
            },
            separatorBuilder: (BuildContext context, int index) => const SizedBox(),                    
      )
    : const Center(child: Text('No items')), // กรณีไม่มีรายการ
),

Card(
  color: Colors.yellow, // สี 
  shadowColor: Colors.red.withAlpha(100), // สีของเงา
  elevation: 5.0, // การยกของเงา
  margin: EdgeInsets.all(8.0), // การเยื้องขอบ
  shape: BeveledRectangleBorder( // รูปแบบ
    borderRadius: BorderRadius.circular(20),
    side: BorderSide(
      width: 2,
      color: Colors.blue,
      style: BorderStyle.solid,
    ),
  ),
  child: ListTile(
    title: Text(article.title),
  ),
);

const EdgeInsets.symmetric(vertical: 8.0) // horizontal | vertical

const EdgeInsets.all(8.0)

const EdgeInsets.only(left: 40.0) // left | top | right | bottom
const EdgeInsets.only(left: 40.0, right:10.0) // กำหนดสองด้าน
const EdgeInsets.only(left: 40.0, right: 10.0,bottom: 5.0) กำหนดสามด้าน

// แบบนี้ต้องกำหนดทุกด้านตามรูปแบบ สลับตำแหน่งกันไม่ได้
const EdgeInsets.fromLTRB(double left, double top, double right, double bottom)

Card(
  margin: const EdgeInsets.all(5.0), // การเยื้องขอบ
  child: Column(
    children: [
      ListTile(
        title: Text(article.title),
      ),
      const Divider(),
      Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          TextButton(
            child: const Text('Like'),
            onPressed: () {/* ... */},
          ),
          const SizedBox(width: 8),
          TextButton(
            child: const Text('Comment'),
            onPressed: () {/* ... */},
          ),
          const SizedBox(width: 8),
          Expanded(
            child: Container(
              color: Colors.green.withAlpha(50),
              alignment: Alignment.centerRight,
              child: TextButton(
                child: const Text('Share'),
                onPressed: () {/* ... */},
              ),
            ),
          ),
        ],
      ),
    ],
  )
);