关于后端:Flutter-12-个小技巧

Flutter 12 个小技巧

你好，敌人 … 心愿你做得很好！明天的我要分享一些疾速提醒和技巧在 Flutter，这将使你的工作容易！！🤩

1. 应用 Flutter 打消键盘 Dismiss Keyboard

要勾销键盘，咱们必须应用手势检测器将焦点集中在不同的节点上，如上面的示例所示。

2. 应用 Flutter 创立一个圆形图像

ClipOval 小部件以椭圆形或圆形形态剪裁子小部件。咱们能够通过更改宽度和高度来从新设置子窗口小部件的形态。如果宽度和高度相等，则形态为圆形。如果给定的宽度和高度不同，那么形态将为椭圆形。让咱们通过一个例子来了解这一点: ー

3. 防止应用 const 构造函数从新构建部件

如果要避免不必要的小部件从新生成，请始终应用常量构造函数。在上面的代码中，即便调用 setState，BoxDecoring 的实例也将放弃不变。

4. 不通明的 RGB 或十六进制色彩

在 Flutter 中，要应用 alpha 从 RGB 创立色彩，请应用:

Container(color: Color.fromRGBO(0, 0, 0, 0.5),
),

应用十六进制色彩:

Container(color: Color(0xFF4286f4),
),
//0xFF -> the opacity (FF for opaque)
//4286f4 -> the hex-color

16 进制管制透明度:

Container(color: Color(0xFF4286f4).withOpacity(0.5),
),
// or change the "FF" value
// 100% — FF
// 95% — F2
// 90% — E6
// 85% — D9
// 80% — CC
// 75% — BF
// 70% — B3
// 65% — A6
// 60% — 99
// 55% — 8C
// 50% — 80
// 45% — 73
// 40% — 66
// 35% — 59
// 30% — 4D
// 25% — 40
// 20% — 33
// 15% — 26
// 10% — 1A
// 5% — 0D
// 0% — 00

5. 在 Column 小部件中增加 ListView 或 GridView ー

如果要在 Column 小部件中应用 ListView 或 GridView，您将看到以下谬误:

flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performResize():
flutter: Vertical viewport was given unbounded height.
flutter: Viewports expand in the scrolling direction to fill their container.In this case, a vertical
flutter: viewport was given an unlimited amount of vertical space in which to expand. This situation
flutter: typically happens when a scrollable widget is nested inside another scrollable widget.
flutter: If this widget is always nested in a scrollable widget there is no need to use a viewport because
flutter: there will always be enough vertical space for the children. In this case, consider using a Column
flutter: instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
flutter: the height of the viewport to the sum of the heights of its children.

在我第一个星期的情绪稳定中，我常常面对这个问题。如果你也在应用 listView 和 GridView (日文) 这一栏翻译的时候遇到了同样的问题，那么试试这个..。

Add these two lines inside The ListView or GridView --

shrinkWrap: true,
physics: NeverScrollablePhysics(),

6. 如何在 Flutter 中向 Widget 增加圆角边框

想要在 Flutter 显示圆形边框的小部件吗？只有用 DecoratedBox 包装你的小部件，而后像这样给它一个装璜:

DecoratedBox(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: const borderRadius: BorderRadius.circular(16),
    ),
    child: someWidget,
  ),

7. 在应用程序的所有晋升按钮上重用雷同的款式

ElevatedButton 在 Flutter 取代了老的 RaisedButton 小部件，它的 API 也不同

ElevatedButton(
  style: ElevatedButton.styleFrom(backgroundColor: Colors.black, // background (button) color
    foregroundColor: Colors.white, // foreground (text) color
    ),
    onPressed: () => print('pressed'),
    child: const Text('Add to Cart'),
  ),

想要在你的应用程序中的所有晋升按钮上重用雷同的款式吗？

只需将 ThemeData.elevatedButtonTheme 设置为 MaterialApp 程序:

MaterialApp(
  theme: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(backgroundColor: Colors.black, // background (button) color
        foregroundColor: Colors.white, // foreground (text) color
      ),
    ),
  ),
),

8. Flutter 中的平台特定代码

您能够应用 dart: io 库编写特定于平台的代码。

import 'dart:io' show Platform;

if (Platform.isIOS) {doSomethingforIOS();
}
if (Platform.isAndroid) {doSomethingforAndroid();
}

9. TextField 的游标是可定制的

咱们能够依据须要自定义 TextField 的光标:

TextField(
  cursorColor: Colors.purple,
  cursorRadius: Radius.circular(8.0),
  cursorWidth: 8.0,
),

10. 按下按钮时扭转文本色彩

是的，咱们能做到

TextButton(onPressed: () {},
  style: ButtonStyle(foregroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {if (states.contains(MaterialState.pressed))
        return Colors.pink;
      return null; // Defer to the widget's default.
      }),
    ),
    child: Text('Change My Color',style: TextStyle(fontSize: 30),
    ),
  ),

11. Floating app bar👀 —

SliverAppBar 是一个提供浮动应用程序栏的小部件

SliverAppBar(
  pinned: true,
  snap: true,
  floating: true,
  expandedHeight: 160.0,
  flexibleSpace: const FlexibleSpaceBar(title: Text('SliverAppBar'),
    background: FlutterLogo(),),
),

11. BackdropFilter in flutter

咱们能够应用 BackdroFilter 小部件来实现这种成果。

https://api.flutter.dev/flutt…

import 'dart:ui'; //we need to import this package first
import 'package:flutter/material.dart';

void main() {runApp(MaterialApp(home: FrostedDemo()));
}

class FrostedDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          ConstrainedBox(constraints: const BoxConstraints.expand(), child: FlutterLogo()),
          Center(
            child: ClipRect(
              child: BackdropFilter(filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                child: Container(
                  width: 200.0,
                  height: 200.0,
                  decoration: BoxDecoration(color: Colors.grey.shade200.withOpacity(0.5)),
                  child: Center(
                    child: Text('Frosted',
                        style: Theme.of(context).textTheme.display3),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

12. Flutter 中的旋转盒子

RotatedBox 小部件用于按四分之一圈的整数旋转它的子元素。它用于将其子窗口小部件定向为程度或垂直方向。此外，它十分轻量级，可用于设计各种用户界面，因为它在应用程序的设计方面为用户提供了灵活性。

RotatedBox(
  quarterTurns: 3,
  child: const Text('Hello World!'),
),

© 猫哥

• wx:ducafecat
• wiki.ducafecat.tech

本文由 mdnice 多平台公布