关于程序员:一些有用的技巧帮助你开发-flutter

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

前言

你好明天给你带来了些有用的倡议，让咱们开始吧。

注释

1. ElevatedButton.styleFrom 疾速款式

你是否厌倦了 container 里那些乏味的 decorations，想要轻松实现这个漂亮的按钮别放心，我给你筹备了一些魔法明码。

示例代码

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

示例代码

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 状态栏色彩

你的状态栏色彩毁坏了你的页面外观吗? 让咱们扭转它..。

示例代码

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

4. 设置 TextStyle.height 段落间距

如果您在页面上显示了一个段落 (例如: 产品描述、对于咱们的内容等)，并且它看起来不如 xd 设计那么好！应用这个神奇的代码，使它有吸引力和顺利。

示例代码

 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 成果..。

示例代码

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..。

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
• https://wiki.ducafecat.tech
• https://video.ducafecat.tech

本文由 mdnice 多平台公布