Flutter 最佳实践 - 01

原文 https://vipinvijayannair.medium.com/

前言

作者把工作中的经验做了罗列，这是第一部分，持续更新。

正文

1. 占位 Placeholder Widget

使用 SizedBox 而不是 Container 作为占位符 widget 。

看看下面的用例

return _loaded ? Container() : YourWidget();

SizedBox 是一个常量构造函数，它创建一个固定大小的框。宽度和高度参数可以为空，以指示不应在相应的维度中约束盒子的大小。

因此，在实现占位符时，应该使用 SizedBox 而不是 Container。

return _loaded ? SizedBox() : YourWidget();

更好的选择

return _loaded ? SizedBox.shrink() : YourWidget();

2. 定义主题 Theme

定义应用程序的主题以及一个优先级，以避免在未来更新改变主题的头痛，设置主题肯定是混乱的，但一次性任务。让你的设计师分享所有与主题相关的数据，比如颜色、字体大小和重量。

MaterialApp(

  title: appName,

  theme: ThemeData(

    // Define the default brightness and colors.
    brightness: Brightness.dark,



    // You can add the color from the separate
    // class here as well to maintain it well.

    primaryColor: Colors.lightBlue[800],    // Define the default font family.
    fontFamily: 'Georgia',    // Define the default `TextTheme`.
    // Use this to specify the default
    // text styling for headlines, titles, bodies of text, and more.
    textTheme: const TextTheme(

      headline1: TextStyle(

        fontSize: 72.0,

        fontWeight: FontWeight.bold,

    ),

    headline6: TextStyle(

        fontSize: 36.0,

        fontStyle: FontStyle.italic

    ),

    bodyText2: TextStyle(

        fontSize: 14.0,

        fontFamily: 'Hind',

    ),

    ),

  ),

  home: const MyHomePage(

    title: appName,

  ),

);

您可以做更多的主题，这是定义您的自定义 TextField，卡片，底部导航栏主题一次，并使用它直接在应用程序。

class AppTheme {

  AppTheme();

  static AppTheme? _current;

  // ignore: prefer_constructors_over_static_methods

  static AppTheme get current {

    _current ??= AppTheme();
    return _current!;
  }


  static ThemeData? lightTheme = ThemeData(

    scaffoldBackgroundColor: AppColors.screenBackground,

    primaryColor: AppColors.blue,

    colorScheme: const ColorScheme.light(secondary: Colors.white),

    cardColor: Colors.white,

    floatingActionButtonTheme: const FloatingActionButtonThemeData(

      backgroundColor: AppColors.blue,

    ),

}

3. 用 if 代替三元运算符

让我们看看下面的例子

三目运算

Row(
  children: [
    Text("Hello Flutter"),
    Platform.isIOS ? Text("iPhone") : SizeBox(),
  ]
);

使用 if

Row(
  children: [
    Text("Hello Flutter"),
    if (Platform.isIOS) Text("iPhone"),
  ]
);

也可以将其用于 widget 数组

Row(
  children: [
    Text("Hello Flutter"),
    if (Platform.isIOS) ...[
      Text("iPhone")
      Text("MacBook")
    ],
  ]
);

4. 尽可能使用 const widget

在这里，TitleWidget 不会在每次构建时都更改，因此最好将其设置为常量 widget 。

优势: 更快的构建，因为在构建过程中 TitleWidget 不会改变，所以将在构建中跳过它。

class MyWidget extends StatelessWidget {

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: const [
          TitleWidget(),
        ],
      ),
    );
  }
}

class TitleWidget extends StatelessWidget {

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

  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.all(10),
      child: Text('Home'),
    );
  }
}

5. 命名规则 Naming Conventions

类、枚举、类型定义和扩展名应该在 UpperCamelCase 中。

class MyWidget { ... }

enum Choice { .. }

typedef Predicate<T> = bool Function(T value);

extension ItemList<T> on List<T> { ... }

库、包、目录和源文件的名称应该放在 snake_case(lowercase_with_underscores) 中。

library firebase_dynamic_links;
import 'my_lib/my_lib.dart';

变量、常量、参数和命名参数应该在 lowerCamelCase 中。

var item;

const cost = 3.14;
final urlScheme = RegExp('^([a-z]+):');

void sum(int price) {
 // ...
}

结束语

如果本文对你有帮助，请转发让更多的朋友阅读。

也许这个操作只要你 3 秒钟，对我来说是一个激励，感谢。

祝你有一个美好的一天~

---

© 猫哥

• 微信 ducafecat

• https://wiki.ducafecat.tech

• https://ducafecat.com