likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 16

一些有用的技巧帮助你开发 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

谢谢你的阅读...

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

© 猫哥