一些有用的技巧帮助你开发 flutter

前语

你好今日给你带来了些有用的主张，让我们开始吧。

一些有用的技巧帮助你开发 flutter

正文

1. ElevatedButton.styleFrom 快速款式

你是否厌恶了 container 里那些庸俗的 decorations ，想要轻松完成这个美丽的按钮别担心，我给你准备了一些魔法暗码。

一些有用的技巧帮助你开发 flutter

示例代码

SizedBox(
  height: 45,
  width: 200,
  child: ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
        elevation: 10, shape: const StadiumBorder()),
    child: const Center(child: Text('Elevated Button')),
  ),
),

一些有用的技巧帮助你开发 flutter

示例代码

SizedBox(
  height: 45,
  width: 60,
  child: ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
        elevation: 10, shape: const CircleBorder()),
    child: const Center(child: Icon(Icons.add)),
  ),
),

2. TextInputAction.next 焦点切换

你们都知道“焦点节点”。这基本上是用来辨认 Flutter 的“焦点树”中特定的 TextField 这答应您在接下来的过程中将焦点放在 TextField 上。但你知道 Flutter 提供了一个奇特的一行代码相同..。

示例代码

Padding(
  padding: const EdgeInsets.all(30.0),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      TextFormField(
        textInputAction: TextInputAction.next,
      ),
      const SizedBox(
        height: 50,
      ),
      TextFormField(
        textInputAction: TextInputAction.next,
      ),
      const SizedBox(
        height: 50,
      ),
      TextFormField(
        textInputAction: TextInputAction.done,
      ),
      const SizedBox(
        height: 50,
      ),
    ],
  ),
);

3. 设置 status Bar 状态栏色彩

你的状态栏色彩破坏了你的页面外观吗? 让我们改变它..。

一些有用的技巧帮助你开发 flutter

示例代码

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
  ));
  runApp(const MyApp());
}

4.设置 TextStyle.height 阶段间距

假如您在页面上显现了一个阶段(例如: 产品描述、关于我们的内容等) ，并且它看起来不如 xd 规划那么好！运用这个奇特的代码，使它有吸引力和顺利。

一些有用的技巧帮助你开发 flutter

示例代码

 Text(
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    style: TextStyle(
      fontSize: 17.0,
      height: 1.8,
    ),
  )

5. 设置文字 3D

想让你的“标题”文字更有吸引力吗? 给它一个有阴影的 3D 效果..。

一些有用的技巧帮助你开发 flutter

示例代码

Center(
  child: Text(
    'Hello, world!',
    style: TextStyle(
      fontSize: 50,
      color: Colors.pink,
      fontWeight: FontWeight.w900,
      shadows: <Shadow>[
        const Shadow(
          offset: Offset(4.0, 4.0),
          blurRadius: 3.0,
          color: Color.fromARGB(99, 64, 64, 64),
        ),
        Shadow(
            offset: const Offset(1.0, 1.0),
            blurRadius: 8.0,
            color: Colors.grey.shade100),
      ],
    ),
  ),
)

6. vscode 插件 Pubspec Assist

你知道 Flutter extensions 吗？你当然是! ！我正在分享我最喜欢的 Flutter extensions..。

一些有用的技巧帮助你开发 flutter

Pubspec Assist 是一个 VisualStudio 代码扩展，它答应您轻松地向 Dart 和 Flutter 项目的 Pubspec 增加依赖项。Yaml 不需要你编辑。你有必要试试。

7. 运用 app 尺寸操控

Application 巨细很重要！运用程序巨细的 Flutter 运用程序是非常重要的。当它是一个更大的运用程序时，尺寸变得愈加重要，因为你需要在设备上有更多的空间。更大的运用程序下载时刻也更长。它扩展了 Flutter 运用程序，可以是两个、三个或更多的安装尺寸。因此，在 Android 平台上减小 Flutter 运用程序的巨细是非常重要的。

这里有一些减小 Flutter 运用程序巨细的技巧 ~ ~ ~

  1. 减小运用程序元素的巨细
  2. 紧缩所有 JPEG 和 PNG 文件
  3. 运用谷歌字体
  4. 在 Android Studio 中运用 Analyzer
  5. 运用命令行中的分析 Analyzer
  6. 减少资源数量和规划
  7. 运用特定的 Libraries

谢谢你的阅读…

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

猫哥

  • 微信 ducafecat

  • wiki.ducafecat.tech

  • video.ducafecat.tech