乐趣区

关于程序员:Flutter-开发中重要的-5-件事情

jiezi

Flutter 开发中重要的 5 件事件

原文 https://medium.com/@kaushikid…

前言

你好，敌人们！欢送回来 … 明天我要分享一些咱们不应该在 flutter 中做的事件

注释

01. 将办法转换成组件

When we have a large layout, then what we usually do is splitting using methods for each widget. Like 👇

当咱们有一个大的布局，而后咱们通常做的是宰割应用办法为每个 widget

import 'package:flutter/material.dart';

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

  // first methodWidget
  _buildHeaderWidget(context) {
    return const Icon(
      Icons.account_box,
      size: 200,
      color: Colors.pink,
    );
  }

  //second methodWidget
  _buildMainWidget(BuildContext context) {
    return Expanded(
      child: Card(
        elevation: 10,
        color: Colors.grey[300],
        child: const Center(
          child: Text('Hello Flutter',),
        ),
      ),
    );
  }

// third methodWidget
  _buildFooterWidget() {
    return const Card(
      elevation: 10,
      child: Padding(padding: EdgeInsets.all(20.0),
        child: Text('This is the footer'),
      ),
    );
  }

  @overrideWidget
  build(BuildContext context) {
    return Scaffold(
      body: Padding(padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const SizedBox(height: 30,),
            _buildHeaderWidget(context),
            _buildMainWidget(context),
            const SizedBox(height: 30,),
            _buildFooterWidget(),],
        ),
      ),
    );
  }
}

然而在下面的模式中，在外部产生的状况是，当咱们进行任何更改并刷新整个 widget 时，它也会刷新办法中的 widget，这会导致咱们节约 CPU 周期。

咱们应该做的是依照以下办法将这些办法转换为无状态 Widget。

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {const MyHomePage({Key? key}) : super(key: key);
  @overrideWidget
  build(BuildContext context) {
    return Scaffold(
      body: Padding(padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: const [
            SizedBox(height: 30,),
            HeaderWidget(),
            MainWidget(),
            SizedBox(height: 30,),
            FooterWidget(),],
        ),
      ),
    );
  }
}

// header class
class HeaderWidget extends StatelessWidget {
  const HeaderWidget({Key? key,}) : super(key: key);
  @overrideWidget
  build(BuildContext context) {
    return const Icon(
      Icons.account_box,
      size: 200,
      color: Colors.pink,
    );
  }
}

//Main class
class MainWidget extends StatelessWidget {
  const MainWidget({Key? key,}) : super(key: key);
  @overrideWidget
  build(BuildContext context) {
    return Expanded(
      child: Card(
        elevation: 10,
        color: Colors.grey[300],
        child: const Center(
          child: Text('Hello Flutter',),
        ),
      ),
    );
  }
}

//Footer class
class FooterWidget extends StatelessWidget {
  const FooterWidget({Key? key,}) : super(key: key);
  @overrideWidget
  build(BuildContext context) {
    return const Card(
      elevation: 10,
      child: Padding(padding: EdgeInsets.all(20.0),
        child: Text('This is the footer'),
      ),
    );
  }
}

您能够在不同的文件夹和文件中分隔这些 widget 类

02. 防止有状态的 widget 然而为什么呢?

每次咱们应用一个状态 widget，就会创立一个状态对象。如果咱们应用所有的状态 widget，将会有很多不必要的状态对象，这将耗费大量的内存。因而，在不须要更改状态的中央，咱们应该应用更简略的状态 - 无状态 widget ️

应用无状态 widget 而不是有状态 widget 的另一个起因是有状态 widget 有一个微小的样板，依据 Flutter API 文档应用一堆嵌套的有状态 widget，通过所有这些构建办法和构造函数传递数据会变得很麻烦。

因而，尽可能防止应用有状态 widget。只在必要时应用。而是应用无状态 widget。

03. 防止应用独自的色彩文件

大多数开发人员一遍又一遍地对所有页面应用颜色代码，这样应用真的好吗？假如你须要开发一个电子商务应用程序，这就是你的应用程序的色彩主题

mainColor = teal
ContainerColor = redContainerColor
appBar color = blue
ButtonColor = orange
popup color = gradient (teal & orange)

您的应用程序中有超过 30 页，并且您正在利用每个页面的色彩！嗯，好吧，然而忽然你的客户说要扭转应用程序的主题，你会不会感觉扭转每个页面的颜色代码有多可怕。

因而，应用独自的文件的主题！创立一个类并调配应用程序中应用的所有色彩。并通过从您想要的地位调用该类来应用它！比如说 

import 'package:flutter/material.dart';
class AppColors {static const mainColor = Color(0xFFe3c6e4);

  static const primaryColor = Color(0xFFEFD9DC);

  static const cardColor = Color(0xFFF8EFF8);

  static const backgroundColor = Color(0xFFF5F5F5);

  static const appBarBackgroundColor = Color(0xFFFDF6FD);

  static const bottomLightIconColor = Color(0xFFd4c8d6);

  static const borderColor = Color(0xFF758A92);

  static const textColor = Color(0xFF2E0132);

  static const darkIconColor = Color(0xFF444647);

  static const darkTextColor = Color(0xFF3D0928);

  static const dullColor = Color(0xFFA7A7A7);

  static const shimmerColor = Colors.black12;

  static const greenColor = Color(0xFF00A35E);

  static const greyColor = Color(0xFF602865);

  static const yellowColor = Color(0xFFC9D103);

  static const lightMainColor = Color(0xFFf3e2f4);

  static const darkMainColor = Color(0xFFcda7d0);

  static const redColor = Color(0xFFB40000);

  static const pinkColor = Color.fromARGB(255, 236, 168, 220);

  static const whiteColor = Color(0xFFFFFFFF);

  static const blackColor = Color.fromARGB(255, 8, 8, 8);

}
// 这是名为“AppColors”的类，这里列出了咱们应用程序中应用的所有色彩。. 当初咱们要做的是

咱们想怎么说就怎么说，比方 

Container(
  height:100,
  width:100,
  color:AppColors.mainColor,
),
// 这里咱们须要导入类“AppColors”

有利于应用独自的色彩文件当初您能够很容易地扭转您的申请的主题

04. 遗记查看调试控制台

假如您有一个完满工作的代码，所有看起来都很好，然而绝不会错过查看调试控制台。在 Flutter 中，有一些在后盾进行的重构，在进入调试控制台之前，您不会看到这些重构。综合思考所有因素，您不会发现更须要关注的是什么，然而对于长期业务来说，它可能会因应用程序解体而产生问题。

伙计！真的不要遗记查看调试控制台之前发送最初的 apk 到客户端，否则老板会喜爱

05. 适度依赖 Packages

软件包在应用程序数据库中存储各种性能方面施展着重要作用。然而，适度应用这样的包可能会导致代码库的适度填充。正因为如此，应用程序的性能将在将来降落。您应该尽量减少这种软件包的应用，或者仅仅取得云服务器对数据库保护的反对。更快的速度和更好的性能能够进步用户对应用程序性能的参与度。

如果本文对你有帮忙，请转发让更多的敌人浏览。

© 猫哥

  • 微信 ducafecat
  • https://wiki.ducafecat.tech
  • https://video.ducafecat.tech

本文由 mdnice 多平台公布

退出移动版