پنج روش برای بهبود کارایی و پرفرمنس برنامه های فلاتر flutter

import 'package:flutter/material.dart';

class JDHomePage extends StatefulWidget {

  @override

  _JDHomePageState createState() => _JDHomePageState();

}

class _JDHomePageState extends State<JDHomePage> {

  int count = 0;

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Column(

        children: [

          IconButton(

            icon: Icon(Icons.search),

            onPressed: () {

              Navigator.of(context).pushNamed('productSearch');

            }),

          InkWell(

              onTap: () {

                setState(() {

                  count += 1;

                });

              },

              child: Text(

                count.toString(),

              )),

          IconButton(

            icon: Icon(Icons.search),

            onPressed: () {

              Navigator.of(context).pushNamed('productSearch');

            })]));  }}

// Build method

@override

Widget build(BuildContext context) {

  return Scaffold(

    body: Column(

      children: [

        _getIcon(),

        InkWell(

            onTap: () {

              setState(() {

                count += 1;

              });

            },

            child: Text(

              count.toString(),

            )),

        _getIcon()

      ], ),);}

Widget _getIcon() {

  return IconButton(

      icon: Icon(Icons.search),

      onPressed: () {

        Navigator.of(context).pushNamed('productSearch');

      });

}

}

// Build method

@override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Column(

        children: [

          JDSearchIcon(),

          InkWell(

              onTap: () {

                setState(() {

                  count += 1;

                });

              },

              child: Text(

                count.toString(),

              )),

          JDSearchIcon(),

        ],),);}}

class JDSearchIcon extends StatelessWidget {

  const JDSearchIcon({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return IconButton(

      icon: Icon(Icons.search),

      onPressed: () {

        Navigator.of(context).pushNamed('productSearch');

      },

    );

  }

}

const EdgeInsets.fromLTRB(16, 4, 16, 8); 
const Color lightGray = Color(0xFFFEFEFE); 
const Text('This is a static text')

Column( children: 
[ 
const JDSearchIcon(), 
InkWell(....),
 const JDSearchIcon(),
 ], ),

اکنون که از کلمه کلیدی مناسب در مقابل ویجت های بدون حالت خود استفاده کردیم، Flutter تنها یک ویجت را در حافظه نگه می دارد و در هر دو مورد به آن ارجاع می دهد. اگر مکان‌های زیادی دارید که می‌توانید این بهینه‌سازی را اضافه کنید، قطعاً باید عملکرد برنامه فلوتر شما را بهبود بخشد.

همچنین، یکی دیگر از مزیت های بزرگ استفاده از کلمه کلیدی const در این مثال با افزایش عملکرد جلوگیری از ساخت های غیر ضروری یک ویجت است. به عنوان مثال، اگر ویجت والد JDSearchIcon بازسازی شود، ویجت های JDSearchIcon را نیز بازسازی نمی کنیم.

۴.تنها ویجت هایی را رندر کنید که روی صفحه قابل مشاهده هستند

هنگامی که با یک لیست عمودی یا افقی بزرگ از ویجت‌ها سر و کار دارید، باید از استفاده از راه‌حلی که همه ویجت‌ها را به‌طور هم‌زمان روی صفحه‌نمایش قابل مشاهده است، استفاده نکنید. در عوض، سعی کنید از ListView.builder برای بهبود عملکرد برنامه flutter خود استفاده کنید.

به عنوان مثال، تصور کنید ما در حال ساخت اپلیکیشن توییتر هستیم و می‌خواهیم یک جدول زمانی با صدها توییت بسازیم. شما باید از استفاده از یک ستون یا سازنده ListView مانند این اجتناب کنید:

ListView(children: _getTwets());
 // or Column(children: _getTweets()); 
List<Widget> _getTweets() {
 for (var tweet in dataSource) { 
return Tweet(tweet);
 } 
}

ListView.builder( 
itemCount: dataSource.length, 
itemBuilder: (context, index) { 
return Tweet(dataSource[index]); 
}, 
)

Opacity( opacity: _visible ? 1.0 : 0.0, child: Text("Text!"), )