我写了一个Flutter package,为社交平台提供登录按钮。以下是一个示例:
当父母让它伸展时,我很难让这个按钮看起来很漂亮。例如,将此按钮放在带有CrossAxisAlignment.stretch
的列中。我希望图标和文字保持原样,并将备用空间“添加”到右侧的蓝色。
从the code可以看出,这是一个带有RaisedButton
和Icon
的Text
,加上一些填充(根据Google的标准定义)。它使用Row
与MainAxisSize.min
:
// Code omitted for clarity (see link above for full version)
ButtonTheme(
child: RaisedButton(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(1.0),
child: Container(
height: 38.0,
width: 38.0,
child: Center(
child: Image(...),
height: 18.0,
width: 18.0,
),
),
),
),
SizedBox(width: 14.0),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 8.0, 8.0, 8.0),
child: Text("Sign in with Google"),
),
],
),
),
);
我尝试将Spacer
添加到行作为最终小部件,但这会导致行始终展开以填充其父级。相反,我希望它只在父母强制它时填充父母。
有关如何解决这个问题的任何建议?
您可以使用Align
小部件作为RaisedButton
的父级,如下所示:
child: Align(
alignment: Alignment.centerLeft,
child: RaisedButton(
onPressed: onPressed,
color: darkMode ? Color(0xFF4285F4) : Colors.white,
child: Row(
mainAxisSize: MainAxisSize.min,
使用这个,你的Row
将不会扩展:)
要么
如果要根据父窗口小部件展开按钮,请使用LayoutBuilder
:
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
return ButtonTheme(
height: 40.0,
padding: const EdgeInsets.all(0.0),
shape: RoundedRectangleBorder(
// Google doesn't specify a border radius, but this looks about right.
borderRadius: BorderRadius.circular(3.0),
),
child: Align(
alignment: Alignment.centerLeft,
child: RaisedButton(
onPressed: onPressed,
color: darkMode ? Color(0xFF4285F4) : Colors.white,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
// The Google design guidelines aren't consistent. The dark mode
// seems to have a perfect square of white around the logo, with a
// thin 1dp (ish) border. However, since the height of the button
// is 40dp and the logo is 18dp, it suggests the bottom and top
// padding is (40 - 18) * 0.5 = 11. That's 10dp once we account for
// the thin border.
//
// The design guidelines suggest 8dp padding to the left of the
// logo, which doesn't allow us to center the image (given the 10dp
// above). Something needs to give - either the 8dp is wrong or the
// 40dp should be 36dp. I've opted to increase left padding to 10dp.
Padding(
padding: const EdgeInsets.all(1.0),
child: Container(
height: 38.0, // 40dp - 2*1dp border
width: 38.0, // matches above
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(3.0),
),
child: Center(
child: Image(
image: AssetImage(
"graphics/google-logo.png",
package: "flutter_auth_buttons",
),
height: 18.0,
width: 18.0,
),
),
),
),
SizedBox(width: 14.0 /* 24.0 - 10dp padding */),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 8.0, 8.0, 8.0),
child: Text(
text,
style: TextStyle(
fontSize: 18.0,
fontFamily: "Roboto",
fontWeight: FontWeight.w500,
color: darkMode
? Colors.white
: Colors.black.withOpacity(0.54),
),
),
),
constraints.minWidth == 0 ? SizedBox.shrink() : Spacer(),
],
),
),
),
);
},
);
}