Apa perbedaan antara fungsi dan kelas untuk membuat widget yang dapat digunakan kembali?

Saya telah menyadari bahwa dimungkinkan untuk membuat widget menggunakan fungsi biasa daripada subclass StatelessWidget . Contohnya seperti ini:

Widget function({ String title, VoidCallback callback }) {
  return GestureDetector(
    onTap: callback,
    child: // some widget
  );
}

Ini menarik karena membutuhkan kode yang jauh lebih sedikit daripada kelas yang lengkap. Contoh:

class SomeWidget extends StatelessWidget {
  final VoidCallback callback;
  final String title;

  const SomeWidget({Key key, this.callback, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
      return GestureDetector(
        onTap: callback,
        child: // some widget
      );
  }
}

Jadi saya bertanya-tanya: Apakah ada perbedaan selain sintaks antara fungsi dan kelas untuk membuat widget? Dan apakah praktik yang baik untuk menggunakan fungsi?

TL; DR: Lebih suka menggunakan kelas daripada fungsi untuk membuat pohon widget yang dapat digunakan kembali .

EDIT : Untuk menebus beberapa kesalahpahaman: Ini bukan tentang fungsi yang menyebabkan masalah, tetapi kelas memecahkan beberapa.

Flutter tidak akan memiliki StatelessWidget jika suatu fungsi dapat melakukan hal yang sama.

Demikian pula, ini terutama ditujukan pada widget publik, dibuat untuk digunakan kembali. Tidak masalah untuk fungsi pribadi dibuat untuk digunakan hanya sekali - meskipun menyadari perilaku ini masih bagus.

Ada perbedaan penting antara menggunakan fungsi daripada kelas, yaitu: Framework tidak mengetahui fungsi, tetapi dapat melihat kelas.

Pertimbangkan fungsi "widget" berikut:

Widget functionWidget({ Widget child}) {
  return Container(child: child);
}

digunakan dengan cara ini:

functionWidget(
  child: functionWidget(),
);

Dan itu setara dengan kelas:

class ClassWidget extends StatelessWidget {
  final Widget child;

  const ClassWidget({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: child,
    );
  }
}

digunakan seperti itu:

new ClassWidget(
  child: new ClassWidget(),
);

Di atas kertas, keduanya tampak melakukan hal yang persis sama: Buat 2 Container, dengan satu bertumpuk ke yang lain. Namun kenyataannya sedikit berbeda.

Dalam kasus fungsi, pohon widget yang dihasilkan terlihat seperti ini:

Container
  Container

Sedangkan dengan kelas, pohon widget adalah:

ClassWidget
  Container
    ClassWidget
      Container

Ini penting karena mengubah cara framework berperilaku saat memperbarui widget.

Mengapa itu penting

Dengan menggunakan fungsi untuk membagi pohon widget Anda menjadi beberapa widget, Anda akan terkena bug dan kehilangan beberapa pengoptimalan kinerja.

Tidak ada jaminan bahwa Anda akan mendapatkan bug dengan menggunakan fungsi, tetapi dengan menggunakan kelas, Anda dijamin tidak akan menghadapi masalah ini.

Berikut beberapa contoh interaktif di Dartpad yang dapat Anda jalankan sendiri untuk lebih memahami masalahnya:

• https://dartpad.dev/1870e726d7e04699bc8f9d78ba71da35
  Contoh ini menunjukkan bagaimana dengan membagi aplikasi Anda menjadi beberapa fungsi, Anda mungkin secara tidak sengaja merusak hal-hal sepertiAnimatedSwitcher

• https://dartpad.dev/a869b21a2ebd2466b876a5997c9cf3f1
  Contoh ini menunjukkan bagaimana kelas memungkinkan pembangunan kembali pohon widget yang lebih terperinci, meningkatkan kinerja

• https://dartpad.dev/06842ae9e4b82fad917acb88da108eee
  Contoh ini menunjukkan bagaimana, dengan menggunakan fungsi, Anda mengekspos diri Anda pada penyalahgunaan BuildContext dan menghadapi bug saat menggunakan InheritedWidgets (seperti Tema atau penyedia)

Kesimpulan

Berikut adalah daftar perbedaan antara menggunakan fungsi dan kelas:

1. Kelas:

• memungkinkan pengoptimalan kinerja (konstruktor const, rekondisi yang lebih terperinci)
• memastikan bahwa beralih di antara dua tata letak yang berbeda akan membuang sumber daya dengan benar (fungsi dapat menggunakan kembali beberapa keadaan sebelumnya)
• memastikan bahwa hot-reload berfungsi dengan baik (menggunakan fungsi dapat menghentikan hot-reload untuk showDialogs& serupa)
• diintegrasikan ke dalam widget inspector.
  • Kita lihat ClassWidgetdi pohon widget yang ditunjukkan oleh devtool, yang membantu memahami apa yang ada di layar
  • Kita bisa mengganti debugFillProperties untuk mencetak parameter apa yang diteruskan ke widget
• pesan kesalahan yang lebih baik
  Jika terjadi pengecualian (seperti ProviderNotFound), kerangka kerja akan memberi Anda nama widget yang sedang dibangun. Jika Anda membagi pohon widget Anda hanya dalam fungsi + Builder, kesalahan Anda tidak akan memiliki nama yang berguna
• dapat menentukan kunci
• dapat menggunakan API konteks

2. Fungsi:

• memiliki lebih sedikit kode (yang dapat diselesaikan menggunakan pembuat kode functional_widget )

Secara keseluruhan, menggunakan fungsi di atas kelas untuk menggunakan kembali widget dianggap sebagai praktik yang buruk karena alasan ini.
Anda bisa , tetapi itu mungkin menggigit Anda di masa depan.

Saya telah meneliti masalah ini selama 2 hari terakhir. Saya sampai pada kesimpulan berikut: TIDAK apa-apa untuk memecah bagian-bagian aplikasi menjadi beberapa fungsi. Idealnya fungsi tersebut mengembalikan a StatelessWidget, sehingga pengoptimalan dapat dilakukan, seperti membuat StatelessWidget const, sehingga tidak membangun kembali jika tidak perlu. Misalnya, potongan kode ini benar-benar valid:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      ++_counter;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            const MyWidgetClass(key: const Key('const')),
            MyWidgetClass(key: Key('non-const')),
            _buildSomeWidgets(_counter),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Widget _buildSomeWidgets(int val) {
    print('${DateTime.now()} Rebuild _buildSomeWidgets');
    return const MyWidgetClass(key: Key('function'));

    // This is bad, because it would rebuild this every time
    // return Container(
    //   child: Text("hi"),
    // );
  }
}

class MyWidgetClass extends StatelessWidget {
  const MyWidgetClass({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('${DateTime.now()} Rebuild MyWidgetClass $key');

    return Container(
      child: Text("hi"),
    );
  }
}

Penggunaan fungsi di sana baik-baik saja, karena mengembalikan a const StatelessWidget. Harap perbaiki saya jika saya salah.

Ada perbedaan besar antara fungsi apa dan fungsi kelas.

Mari saya jelaskan dari awal.🙂 (hanya tentang keharusan)

• Sejarah pemrograman, kita semua tahu dimulai dengan perintah dasar langsung (misalnya: Majelis).

• Pemrograman terstruktur berikutnya hadir dengan kontrol Flow (misalnya: if, switch, while, for dll) Paradigma ini memberikan programmer untuk mengontrol aliran program secara efektif dan juga meminimalkan jumlah baris kode dengan loop.

• Pemrograman prosedural berikutnya datang dan yang mengelompokkan instruksi ke dalam prosedur (fungsi). Ini memberi dua manfaat utama bagi programmer.

  1. Pernyataan grup (operasi) ke dalam blok terpisah.

  2. Dapat menggunakan kembali blok ini. (Fungsi)

Tetapi di atas semua paradigma tidak memberikan solusi untuk mengelola aplikasi. Pemrograman prosedural juga hanya dapat digunakan untuk aplikasi skala kecil. Itu tidak dapat digunakan untuk mengembangkan aplikasi web besar (misalnya: banking, google, youtube, facebook, stackoverflow dll), tidak dapat membuat kerangka kerja seperti android sdk, flutter sdk dan banyak lagi ......

Jadi, para insinyur melakukan lebih banyak penelitian untuk mengelola program dengan cara yang tepat.

• Akhirnya Pemrograman Berorientasi Objek hadir dengan semua solusi untuk mengelola aplikasi dalam skala apa pun. (Dari hello world hingga Triliun orang menggunakan pembuatan sistem misalnya-google, amazon, dan saat ini 90% aplikasi).

• Di OOP semua aplikasi dibangun di sekitar Objek. Artinya aplikasi adalah kumpulan dari objek-objek ini.

jadi objek adalah bangunan dasar untuk aplikasi apa pun.

class (objek saat runtime) mengelompokkan data dan fungsi yang terkait dengan variabel tersebut (data). jadi objek terdiri dari data dan operasi terkaitnya.

[Di sini saya tidak akan menjelaskan tentang oop]

👉👉👉Ok Sekarang Mari datang untuk kerangka flutter.👈👈👈

-Dart mendukung prosedural dan oop Tapi, kerangka Flutter sepenuhnya dibangun dengan menggunakan kelas (oop). (Karena kerangka besar yang dapat dikelola tidak dapat dibuat menggunakan prosedural)

Di sini saya akan membuat daftar alasan mereka menggunakan kelas, bukan fungsi untuk membuat widget.👇👇👇

1 - Sering kali metode build (widget anak) memanggil jumlah fungsi sinkron dan asinkron.

Ex:

• Untuk mengunduh citra jaringan
• dapatkan masukan dari pengguna dll.

jadi metode build perlu disimpan dalam widget kelas yang terpisah (karena semua metode lain yang dipanggil oleh metode build () dapat disimpan dalam satu kelas)

2 - Menggunakan kelas widget Anda dapat membuat nomor dari kelas lain tanpa menulis kode yang sama berulang kali (** Use Of Inheritance ** (extends)).

Dan juga menggunakan warisan (memperpanjang) dan polimorfisme (menimpa) Anda dapat membuat kelas khusus sendiri. (Di bawah contoh, Di sana saya akan menyesuaikan (Menimpa) animasi dengan memperluas MaterialPageRoute (karena transisi defaultnya saya ingin menyesuaikan) .👇

class MyCustomRoute<T> extends MaterialPageRoute<T> {
  MyCustomRoute({ WidgetBuilder builder, RouteSettings settings })
      : super(builder: builder, settings: settings);

  @override                                      //Customize transition
  Widget buildTransitions(BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child) {
    if (settings.isInitialRoute)
      return child;
    // Fades between routes. (If you don't want any animation, 
    // just return child.)
    return new FadeTransition(opacity: animation, child: child);
  }
}

3 - Fungsi tidak dapat menambahkan kondisi untuk parameternya, Tetapi menggunakan konstruktor widget kelas Anda dapat melakukan ini.

Di bawah contoh Kode👇 (fitur ini banyak digunakan oleh widget kerangka kerja)

const Scaffold({
    Key key,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomPadding,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
  }) : assert(primary != null),
       assert(extendBody != null),
       assert(extendBodyBehindAppBar != null),
       assert(drawerDragStartBehavior != null),
       super(key: key);

4 - Fungsi tidak dapat menggunakan const dan widget Kelas dapat menggunakan const untuk konstruktornya. (yang mempengaruhi kinerja utas utama)

5 - Anda dapat membuat sejumlah widget independen menggunakan kelas yang sama (instance dari kelas / objek) Tetapi fungsi tidak dapat membuat widget independen (instance), tetapi dapat menggunakan kembali.

[setiap instance memiliki variabel instance sendiri-sendiri dan yang sepenuhnya independen dari widget (objek) lain, Tetapi variabel lokal fungsi bergantung pada setiap pemanggilan fungsi * (yang berarti, ketika Anda mengubah nilai variabel lokal, itu mempengaruhi semua bagian lain dari aplikasi yang menggunakan fungsi ini)]

Ada banyak Keuntungan di kelas dibandingkan fungsi .. (di atas hanya beberapa kasus penggunaan)

🤯 Pikiran Terakhir Saya

Jadi jangan gunakan Functions sebagai blok penyusun aplikasi Anda, gunakan hanya untuk melakukan Operasi. Jika tidak, ini menyebabkan banyak masalah yang tidak dapat ditangani saat aplikasi Anda menjadi skalabel .

• Gunakan fungsi untuk melakukan sebagian kecil tugas
• Gunakan kelas sebagai blok penyusun aplikasi (Mengelola aplikasi)

📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍 📍📍📍📍📍📍📍

ANDA TIDAK DAPAT MENGUKUR KUALITAS PROGRAM DENGAN JUMLAH LAPORAN (atau baris) YANG DIGUNAKAN OLEHnya

📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍📍 📍📍📍📍📍📍📍

Terima kasih sudah membaca

Saat Anda memanggil widget Flutter, pastikan Anda menggunakan kata kunci const. Sebagai contohconst MyListWidget();