روز 2: استفاده از ابزارک های Flutter – سفر از طریق ListTile و StreamBuilder

ادامه کاوش فلاتر من

امروز، به عنوان بخشی از سفر آموزشی خود با دوره آموزشی «توسعه‌دهنده فلاتر شوید» Educative بیشتر به ابزارک‌های رایج فلاتر پرداختم. من اجرای عملی آن را بررسی کردم ListTile و StreamBuilder، و درک خود را با چندین ویجت همه کاره دیگر مانند Container، ListView، Column، Row، و Form. این مؤلفه‌ها برای ایجاد رابط‌های کاربری کارآمد و پویا در برنامه‌های Flutter ضروری هستند.

درک ListTile

ویجت ListTile ایجاد آیتم های لیست را ساده می کند و روشی ساختاریافته برای نمایش عناصر در یک لیست ارائه می دهد. این برنامه به گونه‌ای طراحی شده است که بسیار قابل تنظیم باشد، از نمادهای پیشرو و انتهایی، چندین خط متن و رویدادهای تعاملی پشتیبانی می‌کند و آن را به یک عنصر اصلی برای هر کسی که رابط‌های فهرست سنگینی می‌سازد، تبدیل می‌کند.

پیاده سازی عملی ListTile

در اینجا نگاهی گذرا به نحوه انجام آن می پردازیم ListTile در یک محیط پویا مورد استفاده قرار گرفت:

Stream<int> streamListOfSquares(int n) async* {
    for (int i = 0; i < n; ++i) {
        await Future.delayed(const Duration(seconds: 1));
        yield i*i;
    }
}

Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Stream Builder Example')),
        body: Center(
            child: StreamBuilder<int>(
                stream: streamListOfSquares(10),
                builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                        return CircularProgressIndicator();
                    } else if (snapshot.hasData) {
                        return ListView.builder(
                            itemCount: snapshot.data! + 1,
                            itemBuilder: (context, index) {
                                return ListTile(
                                    title: Text('The item number is ${index * index}'),
                                    subtitle: Text('The index is $index'),
                                );
                            },
                        );
                    } else {
                        return Text('Something wrong happened.');
                    }
                },
            ),
        ),
    );
}

کاوش در StreamBuilder

را StreamBuilder ویجت برای ساخت رابط هایی طراحی شده است که به جریان های داده ناهمزمان مانند پاسخ های شبکه یا ورودی کاربر واکنش نشان می دهند. برای برنامه هایی که نیاز به به روز رسانی داده ها در زمان واقعی بدون مداخله دستی دارند، فوق العاده مفید است.

ترکیب StreamBuilder با ListTile

در قطعه کد ارائه‌شده، StreamBuilder و ListTile با هم کار می‌کنند تا داده‌ها را در حین پردازش به‌صورت پویا نمایش دهند و نشان دهند که Flutter چگونه به‌روزرسانی‌های بی‌درنگ داده را مدیریت می‌کند.

پایان روز 2

جلسه امروز بینش های عملی را در مورد دو مورد از ابزارک های رایج Flutter ارائه کرد، و جعبه ابزار من را برای ساخت برنامه های تعاملی و پویاتر تقویت کرد. همانطور که به کاوش بیشتر پیشنهادات فلاتر ادامه می دهم، تطبیق پذیری و قدرت معماری مبتنی بر ویجت فلاتر بیش از پیش آشکار می شود.

در ادامه سفر خود در دنیای فلاتر، منتظر اطلاعات بیشتر باشید!