مشکل

طراح این دکمه ها را به شما می دهد و اکنون باید آنها را در Flutter پیاده سازی کنید.

در نگاه اول می بینید که دو نوع دکمه مختلف است:

1.دکمه با متن

2.دکمه با نماد و متن

چگونه این کامپوننت ها را کد نویسی نکنیم!

واضح است که 2 مؤلفه وجود دارد، اما از آنجایی که شما باهوش هستید، تصمیم می گیرید آن را به عنوان یک مؤلفه واحد پیاده سازی کنید و به صورت زیر قابل استفاده مجدد کنید:

دکمه با متن

سپس، با استفاده مجدد از مؤلفه قدیمی به صورت زیر، یک مؤلفه جدید برای دکمه با نماد ایجاد می‌کنید:

دکمه با نماد

پیاده‌سازی آن به این صورت کار می‌کند، اما با نوشتن CustomButton و ارسال تمام پارامترها، اساسا کدهای تکراری دارید.

برای تعداد کمی از پارامترها، این ممکن است مشکلی ایجاد نکند، اما برای تعداد زیادی از پارامترها (و این به ویژه هنگام کار با فلاتر اتفاق می افتد) تعداد تکرارها غیر منطقی است.

جهت آموزش فلاتر و سورس‌های متعدد به سایت فلاتر فارسی سر بزنید

خب، پس چه باید کرد؟

یه راه دیگه هم هست!!!

اینجاست که قدرت برنامه نویسی شی گرا به میان می آید.

برای حذف این موارد تکراری، می‌توانیم این دکمه را با استفاده از وراثت به صورت زیر پیاده‌سازی کنیم:

کلاس انتزاعی AppButton exte

دکمه با متن

دکمه با نماد

همه اینها به این دلیل امکان پذیر است که ما اجزای UI را در Flutter با استفاده از کلاس های Dart می سازیم.

این فقط یک ایده ساده است.

با این حال،

این ایده بسیار قدرتمند است، نه تنها برای مؤلفه‌های رابط کاربری ساده و بدون حالت مانند دکمه مفید است، بلکه می‌توان از آن برای صفحه نمایش Stateful نیز استفاده کرد. تنها تفاوت اجرای چنین ایده ای با Stateful Screens این است که انتزاع پایه (یعنی کلاس انتزاعی)

به جای گسترش StatelessWidget،

< State<T extends StatefulWidget را گسترش خواهد داد.

این تکنیک می تواند به کاهش تعداد زیادی از کدهای تکراری و پاک کردن کد کمک کند.

جهت آموزش فلاتر و سورس‌های متعدد به سایت فلاتر فارسی سر بزنید

منبع‌نوشته