การใช้งาน Shimmer effect แสดงการรอโหลดข้อมูลใน Flutter

บทความใหม่ ยังไม่ถึงปี โดย Ninenik Narkdee
layout product gridview shimmer masonrygridview listview

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ layout product gridview shimmer masonrygridview listview

ดูแล้ว 495 ครั้ง


เนื้อหาต่อไปนี้ เราจะมาต่อยอดเล็กน้อยจากตอนที่แล้ว 
โดยการเพิ่ม shimmer effect เพื่อแสดงสถานะการรอโหลด
ข้อมูล จากเดิมๆ ที่เราจะคุ้นกับวงกลมหมุนๆ ก็เพื่อความแปลกใหม่
ให้ดูหลากหลายไม่จำเจ ด้วยการใช้งานรูปแบบ shimmer
 
บทความนี้ใช้เนื้อหาต่อจากบทความตอนที่แล้ว
แนวทางจัดการ Layout แสดงรายการสินค้าแบบต่างๆใน Flutter http://niik.in/1110
 
ท้ายบทความมีโค้ดตัวอย่างให้ดาวน์โหลด
 

Shimmer effect คืออะไร

    Shimmer effect คือเอฟเฟกต์ที่ใช้ในการแสดงตัวอย่างของข้อมูลที่ยังโหลดไม่เสร็จสมบูรณ์ 
หรือเพื่อแสดงพื้นที่ที่ข้อมูลกำลังจะมา โดยเอฟเฟกต์นี้จะสร้างการเคลื่อนไหวที่ดูคล้ายกับแสงที่วิ่งผ่าน
ไปมาบนพื้นหลังสีเทา เพื่อให้ผู้ใช้ทราบว่ากำลังมีการโหลดข้อมูลอยู่
 
ตัวอย่างที่เห็นได้บ่อยๆ ของการใช้ Shimmer effect คือในแอปพลิเคชันที่ต้องดึงข้อมูลจาก
อินเทอร์เน็ต เช่น รายการสินค้า ข่าวสาร หรือโปรไฟล์ผู้ใช้ เมื่อข้อมูลเหล่านี้ยังโหลดไม่เสร็จ 
พื้นที่ที่ควรจะแสดงข้อมูลนั้นๆ จะถูกแทนที่ด้วยเอฟเฟกต์ Shimmer ซึ่งช่วยให้ผู้ใช้เข้าใจว่า
กำลังมีการโหลดข้อมูล และลดความรู้สึกว่าการโหลดนั้นช้า
 
ใน Flutter สามารถใช้แพ็กเกจอย่าง shimmer เพื่อสร้างเอฟเฟกต์นี้ได้ง่ายๆ โดยแค่ใส่โค้ด
สำหรับแสดง Shimmer effect ไว้ในตำแหน่งที่ข้อมูลจริงจะปรากฏเมื่อโหลดเสร็จ
ติดตั้งก่อนใช้งานในไฟล์ pubspec.yaml
 
shimmer: ^3.0.0
 

ตัวอย่างผลลัพธ์ของ Layout แต่ละแบบในตอนที่แล้ว

 


 

ตัวอย่างผลลัพธ์ของการใช้งาน Shimmer

 

 
 
    การใช้งาน shimmer หลักๆ แล้วก็จะเหมือนเราใช้ Container และ Sizebox รวมถึง widget
ต่างๆ ที่เกี่ยวข้อง มาสร้างกล่อง เพื่อจำลองรูปแบบข้อมูลที่จะแสดง จากนั้นใช้ Shimmer เพื่อเพิ่ม
เอฟเฟกต์คล้ายแสงมันวาวคล้ายผ่านกล่องรายการนั้นๆ 
    ในที่นี้ เรามีรูปแบบ layout ด้วยกัน 4 รูปแบบ ดั้ง แต่ละ layout ก็จะมี shimmer ที่มีรูปแบบที่
แตกต่างกัน เราจึงใช้เป็นวิธีการสร้างเป็น class แยกไว้อีกส่วนหนึ่ง แล้วค่อยเรียกใช้งาน เราจะสร้าง
ไว้ในโฟลเดอร์  lib > shimmers > product_shimmer.dart
 

ไฟล์ product_shimmer.dart

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
 
class ShimmerLoading1 extends StatelessWidget {
  const ShimmerLoading1({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      // ปรับความสูงขางรายการทั้งหมด  การ ลบค่า เพื่อให้ข้อมูลแสดงเต็มพื้นที่
      // หากมี appbar ควรลบ 100 ถ้ามีส่วนอื่นเพิ่มให้บวกเพิ่มเข้าไป ตามเหมาะสม
      // หากไม่มี appbar ควรลบพื้นที่ที่เพิ่มเข้ามาค่าอื่นๆ ตามเหมาะสม
      height: MediaQuery.of(context).size.height - 136,
      child: ListView.builder(
        itemCount: 10, // แสดง 10 รายการ
        itemBuilder: (context, index) {
          return Card(
            margin: const EdgeInsets.all(5.0),
            child: Column(
              children: [
                ListTile(
                  leading: Shimmer.fromColors(
                    baseColor: Colors.grey[300]!,
                    highlightColor: Colors.grey[100]!,
                    child: Container(
                      width: 100.0,
                      height: 100.0,
                      color: Colors.white,
                    ),
                  ),
                  title: Shimmer.fromColors(
                    baseColor: Colors.grey[300]!,
                    highlightColor: Colors.grey[100]!,
                    child: Container(
                      width: double.infinity,
                      height: 20.0,
                      color: Colors.white,
                    ),
                  ),
                  subtitle: Shimmer.fromColors(
                    baseColor: Colors.grey[300]!,
                    highlightColor: Colors.grey[100]!,
                    child: Container(
                      width: double.infinity,
                      height: 20.0,
                      color: Colors.white,
                    ),
                  ),
                  trailing: Shimmer.fromColors(
                    baseColor: Colors.grey[300]!,
                    highlightColor: Colors.grey[100]!,
                    child: Icon(Icons.more_vert, color: Colors.grey),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
 
 
class ShimmerLoading2 extends StatelessWidget {
  const ShimmerLoading2({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      // ปรับความสูงขางรายการทั้งหมด  การ ลบค่า เพื่อให้ข้อมูลแสดงเต็มพื้นที่
      // หากมี appbar ควรลบ 100 ถ้ามีส่วนอื่นเพิ่มให้บวกเพิ่มเข้าไป ตามเหมาะสม
      // หากไม่มี appbar ควรลบพื้นที่ที่เพิ่มเข้ามาค่าอื่นๆ ตามเหมาะสม
      height: MediaQuery.of(context).size.height - 136,
      child: ListView.separated(
        itemCount: 10, // จำนวนรายการ Shimmer ที่จะแสดง
        itemBuilder: (context, index) {
          return Card(
            margin: const EdgeInsets.all(5.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Shimmer.fromColors(
                    baseColor: Colors.grey[300]!,
                    highlightColor: Colors.grey[100]!,
                    child: Container(
                      height: 100.0,
                      width: 100.0,
                      color: Colors.white,
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(0.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Shimmer.fromColors(
                          baseColor: Colors.grey[300]!,
                          highlightColor: Colors.grey[100]!,
                          child: Container(
                            width: double.infinity,
                            height: 20.0,
                            color: Colors.white,
                          ),
                        ),
                        const SizedBox(height: 8.0),
                        Shimmer.fromColors(
                          baseColor: Colors.grey[300]!,
                          highlightColor: Colors.grey[100]!,
                          child: Container(
                            width: 100.0,
                            height: 20.0,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          );
        },
        separatorBuilder: (BuildContext context, int index) => const SizedBox(),
      ),
    );
  }
}
 
class ShimmerLoadingGrid extends StatelessWidget {
  const ShimmerLoadingGrid({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      // ปรับความสูงขางรายการทั้งหมด  การ ลบค่า เพื่อให้ข้อมูลแสดงเต็มพื้นที่
      // หากมี appbar ควรลบ 100 ถ้ามีส่วนอื่นเพิ่มให้บวกเพิ่มเข้าไป ตามเหมาะสม
      // หากไม่มี appbar ควรลบพื้นที่ที่เพิ่มเข้ามาค่าอื่นๆ ตามเหมาะสม
      height: MediaQuery.of(context).size.height - 136,
      child: GridView.builder(
        padding: const EdgeInsets.all(5.0),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, // จำนวนคอลัมน์
          crossAxisSpacing: 0.0,
          mainAxisSpacing: 0.0,
          childAspectRatio: 3 / 3.8, // อัตราส่วนของขนาด
        ),
        itemCount: 10, // จำนวนรายการ Shimmer ที่จะแสดง
        itemBuilder: (context, index) {
          return Card(
            child: Padding(
              padding: const EdgeInsets.all(3.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Align(
                    child: Shimmer.fromColors(
                      baseColor: Colors.grey[300]!,
                      highlightColor: Colors.grey[100]!,
                      child: Container(
                        height: 150,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  const SizedBox(height: 10.0),
                  Padding(
                    padding: const EdgeInsets.all(3.0),
                    child: Shimmer.fromColors(
                      baseColor: Colors.grey[300]!,
                      highlightColor: Colors.grey[100]!,
                      child: Container(
                        height: 20.0,
                        width: double.infinity,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  const SizedBox(height: 5.0),
                  Padding(
                    padding: const EdgeInsets.all(3.0),
                    child: Shimmer.fromColors(
                      baseColor: Colors.grey[300]!,
                      highlightColor: Colors.grey[100]!,
                      child: Container(
                        height: 20.0,
                        width: 80.0,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}
 
class ShimmerLoadingMasonryGrid extends StatelessWidget {
  const ShimmerLoadingMasonryGrid({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      // ปรับความสูงขางรายการทั้งหมด  การ ลบค่า เพื่อให้ข้อมูลแสดงเต็มพื้นที่
      // หากมี appbar ควรลบ 100 ถ้ามีส่วนอื่นเพิ่มให้บวกเพิ่มเข้าไป ตามเหมาะสม
      // หากไม่มี appbar ควรลบพื้นที่ที่เพิ่มเข้ามาค่าอื่นๆ ตามเหมาะสม
      height: MediaQuery.of(context).size.height - 136,
      child: MasonryGridView.builder(
        padding: const EdgeInsets.all(5.0),
        gridDelegate: const SliverSimpleGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, // จำนวนคอลัมน์
        ),
        itemCount: 10, // จำนวนรายการ Shimmer ที่จะแสดง
        itemBuilder: (context, index) {
          return Card(
            child: Padding(
              padding: const EdgeInsets.all(3.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Shimmer.fromColors(
                    baseColor: Colors.grey[300]!,
                    highlightColor: Colors.grey[100]!,
                    child: Container(
                      height: index % 2==0 || index % 3 == 0 ? 180 : 150, // ขนาดพื้นที่แสดงผลรูปภาพ
                      color: Colors.white,
                    ),
                  ),
                  const SizedBox(height: 10.0),
                  Padding(
                    padding: const EdgeInsets.all(3.0),
                    child: Shimmer.fromColors(
                      baseColor: Colors.grey[300]!,
                      highlightColor: Colors.grey[100]!,
                      child: Container(
                        height: 20.0,
                        width: double.infinity,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  const SizedBox(height: 5.0),
                  Padding(
                    padding: const EdgeInsets.all(3.0),
                    child: Shimmer.fromColors(
                      baseColor: Colors.grey[300]!,
                      highlightColor: Colors.grey[100]!,
                      child: Container(
                        height: 20.0,
                        width: 80.0,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}
 
จากนั้นในไฟล์ product.dart เราก็แค่เปลี่ยนในส่วนนี้ ตามชื่อ class และรูปแบบ layout ที่เรา
ต้องการเรียกใช้งาน
 

ไฟล์   product.dart โค้ดบ้างส่วน

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
....
// อย่าลืม import shimmer ที่สร้าง มาใช้งาน
import '../shimmers/product_shimmer.dart';
....
 
....
....
              } else if (snapshot.hasError) {
                return Center(child: Text('${snapshot.error}'));
              }
              // return const Center(child: CircularProgressIndicator());
              return const ShimmerLoadingMasonryGrid();
            },
          ),
        ],
......
 
    จากเดิม เราใช้งานเป็น
 
1
const Center(child: CircularProgressIndicator())
 
ก็เปลี่ยนเป็นรูปแบบ shimmer ที่สัมพันธ์กับ layout ที่เราแสดงข้อมูล ซึ่งก็จะมี
 
1
2
3
4
5
// class จากไฟล์ product_shimmer.dart
const ShimmerLoading1();
const ShimmerLoading2();
const ShimmerLoadingGrid();
const ShimmerLoadingMasonryGrid();
 
    การสร้างเป็นไฟล์แยก จะทำให้โค้ดของโปรแกรมหลักของเราจะไม่ดูรกเกินไป และทำให้จัดการแก้ไข
รูปแบบการแสดงได้ง่ายขึ้น  เท่านี้เราก็สามารถสร้าง shimmer effect ให้กับการรอโหลดข้อมูลได้
อย่างง่ายดาย


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 03-09-2024


ดาวน์โหลดโค้ดตัวอย่าง สามารถนำไปประยุกต์ หรือ run ทดสอบได้

http://niik.in/download/flutter/demo_040_03092024_source.rar


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ



ทบทวนบทความที่แล้ว









เนื้อหาที่เกี่ยวข้อง






เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



( หรือ เข้าใช้งานผ่าน Social Login )




URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ