Closed9

Flutter memo

GAKUGAKU

Icon の default size は 24

  /// The size of the icon in logical pixels.
  ///
  /// Icons occupy a square with width and height equal to size.
  ///
  /// Defaults to the current [IconTheme] size, if any. If there is no
  /// [IconTheme], or it does not specify an explicit size, then it defaults to
  /// 24.0.
  ///
  /// If this [Icon] is being placed inside an [IconButton], then use
  /// [IconButton.iconSize] instead, so that the [IconButton] can make the splash
  /// area the appropriate size as well. The [IconButton] uses an [IconTheme] to
  /// pass down the size to the [Icon].
  final double? size;
GAKUGAKU

Material で ripple 領域を制限できる

    return Material(
      type: MaterialType.transparency,
      borderRadius: BorderRadius.circular(32),
      clipBehavior: Clip.antiAlias,
      child: IconButton(
        icon: Icon(),
        onPressed: onPressed ?? router.pop,
      ),
    );
GAKUGAKU

最終、
MaterialType.button
borderRadius

    return Material(
      type: MaterialType.button,
      borderRadius: BorderRadius.circular(32),
      clipBehavior: Clip.antiAlias,
      color: backgroundColor,
      child: IconButton(
        icon: Icon(
          Icons.arrow_back,
          color: theme.mono.mono100,
          semanticLabel: l10n.semantics_back,
        ),
        onPressed: onPressed ?? router.pop,
      ),
GAKUGAKU

最終

    return SizedBox(
      height: height.value,
      width: height.value,
      child: Center(
        child: Material(
          type: MaterialType.circle,
          clipBehavior: Clip.antiAlias,
          color: backgroundColor,
          child: IconButton(
            iconSize: height.value / 2,
            icon: Icon(
              Icons.arrow_back,
              color: iconColor ?? theme.mono.mono100,
              semanticLabel: l10n.semantics_back,
            ),
            onPressed: onPressed ?? router.pop,
          ),
        ),
      ),
    );
GAKUGAKU

なぜ ripple effect で Material がいるのか?
renderObjectから理解する

GAKUGAKU

BoxConstraints.tightFor の制約について

    return Material(
      clipBehavior: Clip.antiAlias,
      color: color ?? Colors.transparent,
      shape: CircleBorder(side: borderSide ?? BorderSide.none),
      child: IconButton(
        icon: icon,
        onPressed: onPressed,
        padding: EdgeInsets.zero,
        constraints: BoxConstraints.tightFor(
          width: height.value,
          height: height.value,
        ),
      ),
    );
GAKUGAKU

BoxConstraints.tightFor を子供に渡す

制約を子供に渡しているに過ぎない。

minWidth / maxWidth / minHeight / minWidth を子に渡してるに過ぎない

max の指定がなければ inifinity となるだけ

  /// Creates box constraints that require the given width or height.
  ///
  /// See also:
  ///
  ///  * [new BoxConstraints.tightForFinite], which is similar but instead of
  ///    being tight if the value is non-null, is tight if the value is not
  ///    infinite.
  const BoxConstraints.tightFor({
    double? width,
    double? height,
  }) : minWidth = width ?? 0.0,
       maxWidth = width ?? double.infinity,
       minHeight = height ?? 0.0,
       maxHeight = height ?? double.infinity;
GAKUGAKU
  • Constraints go down.
  • Geometry goes up just one time.
  • There is no back and forth.
このスクラップは2021/07/26にクローズされました