Closed9
Flutter memo

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;

Material で ripple 領域を制限できる
return Material(
type: MaterialType.transparency,
borderRadius: BorderRadius.circular(32),
clipBehavior: Clip.antiAlias,
child: IconButton(
icon: Icon(),
onPressed: onPressed ?? router.pop,
),
);

最終、
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,
),

最終
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,
),
),
),
);

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

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,
),
),
);

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;

- Constraints go down.
- Geometry goes up just one time.
- There is no back and forth.

Navigator vs Router
このスクラップは2021/07/26にクローズされました