我有一個 BrandButton 小部件。它只是拿著帶有品牌的登錄按鈕。它有圖示、標簽和一些顏色。在蘋果中，我可以使用 Icon(Icons.apple) 因為它會有白色的簡單圖示，而 facebook 也是一樣的。但在谷歌我想使用彩色的。那么我該怎么做呢？如何制作自定義圖示？我的自定義小部件不接受影像或什么。我該如何解決？謝謝大家的幫助！
我想要：
我的小部件：
class BrandButton extends StatelessWidget {
final String label;
final double height;
final Color backgroundColor;
final Color textColor;
final Icon brandIcon;
const BrandButton(
{Key? key,
this.label = "Sign in with Apple",
this.height: 48,
this.backgroundColor: Colors.black,
required this.brandIcon,
this.textColor: Colors.white})
: super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: height,
child: ElevatedButton(
onPressed: () {},
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
backgroundColor: MaterialStateProperty.all<Color>(backgroundColor),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
brandIcon,
SizedBox(width: 15),
Text(
label,
style: TextStyle(
color: textColor,
fontWeight: FontWeight.w500,
fontSize: 17,
height: 1.41),
)
],
)),
);
}
}
uj5u.com熱心網友回復：
那么主要的問題是，上面的另外兩個是圖示，你想要的是一個影像，所以這就是你需要做的。
下載 Google 登錄所需的資產。您可以使用此品牌指南
您需要將資產添加到您的專案中。例如，您可以在根專案中有一個 images 檔案夾并在 images 檔案夾中添加。
轉到您的
pubspec.yaml檔案并將影像添加到資產下的專案中：
assets:
- images/google_logo.png
- 執行
flutter pub get并確保添加了影像。 - 按如下方式更新您的 BrandButton 小部件：
主要區別是；
- 您的 brandLogo 現在是一個小部件，因此您可以傳遞影像
- 我將文本更改為必需的，而不是默認值。
- 做了一些小的代碼改進。
class BrandButton extends StatelessWidget {
final String label;
final double height;
final Color backgroundColor;
final Color textColor;
final Widget brandIcon;
const BrandButton({
required this.brandIcon,
required this.label,
this.height = 48,
this.backgroundColor = Colors.black,
this.textColor = Colors.white,
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
height: height,
child: ElevatedButton(
onPressed: () {},
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
backgroundColor: MaterialStateProperty.all<Color>(backgroundColor),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
brandIcon,
const SizedBox(width: 15),
Text(
label,
style: TextStyle(
color: textColor,
fontWeight: FontWeight.w500,
fontSize: 17,
height: 1.41),
)
],
),
),
);
}
}
uj5u.com熱心網友回復：
您可以為 創建另一個 nullabe 變數Image，它可以是影像路徑的字串或Image它本身，并且使兩者都成為可選的brandIcon和image。并在使用這些變數時為空。
在使用BrandButton時，您可以通過其中任何一個或兩個，您也可以優先顯示一個。
class BrandButton extends StatelessWidget {
final String label;
final double height;
final Color backgroundColor;
final Color textColor;
final Icon? brandIcon;
final Image? image;
const BrandButton({
Key? key,
this.label = "Sign in with Apple",
this.height: 48,
this.backgroundColor: Colors.black,
this.textColor: Colors.white,
this.image,
this.brandIcon,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: height,
child: ElevatedButton(
onPressed: () {},
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
backgroundColor: MaterialStateProperty.all<Color>(backgroundColor),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if (image != null) image!,
if (brandIcon != null) brandIcon!,
SizedBox(width: 15),
Text(
label,
style: TextStyle(
color: textColor,
fontWeight: FontWeight.w500,
fontSize: 17,
height: 1.41),
)
],
)),
);
}
}
uj5u.com熱心網友回復：
Flutter 的圖示串列中沒有默認的 google 圖示。所以，你可以做的是：
從這里下載 svg google 圖示icons8 用于 google 圖示
之后按照這篇文章。這篇文章展示了如何為你的 Flutter 應用設定自定義圖示：自定義圖示實作。
如果以上不是您想要的，您可以在 stackoverflow 上關注這個答案，它顯示了如何為圖示添加兩種色調。您必須根據自己的需要編輯答案。但在我看來，上面的內容要容易得多。堆疊答案
uj5u.com熱心網友回復：
根據您的代碼，您只需將brandIconfrom的型別Icon轉換為Widget。然后創建一個自定義小部件并將其傳遞給brandIcon引數。
這是示例：
class BrandButton extends StatelessWidget {
final String label;
final double height;
final Color backgroundColor;
final Color textColor;
final Widget brandIcon;
const BrandButton(
{Key? key,
this.label = "Sign in with Apple",
this.height: 48,
this.backgroundColor: Colors.black,
required this.brandIcon,
this.textColor: Colors.white})
: super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: height,
child: ElevatedButton(
onPressed: () {},
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
backgroundColor: MaterialStateProperty.all<Color>(backgroundColor),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
brandIcon,
SizedBox(width: 15),
Text(
label,
style: TextStyle(
color: textColor,
fontWeight: FontWeight.w500,
fontSize: 17,
height: 1.41),
)
],
)),
);
}
}
并稱之為，
BrandButton(
brandIcon: Image.network('some icon image url'),
)
uj5u.com熱心網友回復：
您可以簡單地使用 Image 小部件來顯示資產中的影像，甚至可以使用 flutter_svg: ^1.0.3 包來顯示 svg 檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448691.html