如何将图标添加到盒子装饰？答案

【问题标题】：How can I add an Icon to to Box Decoration?如何将图标添加到盒子装饰？
【发布时间】：2022-01-17 11:01:10
【问题描述】：

我想像这样在盒子装饰中添加一个图标，您在左侧看到图像。

如何用盒子装饰添加这个

代码如下：

    Container(
             width: 307,
             decoration: BoxDecoration(
                border: Border.all(color: Colors.blueAccent),
               borderRadius: BorderRadius.circular(10.0),
               shape: BoxShape.rectangle,
             ),
           child: CountryListPick(
            onChanged: (list){
              print(list?.name);
                },
              theme: CountryTheme(
                labelColor: Colors.white,
                isShowFlag:true,
                isShowCode: false,
                isShowTitle:true,
                isDownIcon: true,
                showEnglishName: true,
              ),
            ),
           ),

【问题讨论】：

标签： android flutter dart

【解决方案1】：

您可以将此小部件用于带有 boxdecoration 和图标的文本字段：

TextFormField(
          key: Key(key),
          controller: controller,
          decoration: InputDecoration(
            prefixIcon: Icon(icon), // <-- left icon
            hintText: hintText,
            border: OutlineInputBorder( //<--- decoration border
              borderRadius: BorderRadius.all(Radius.circular(90.0)),
              borderSide: BorderSide.none,
            ),
            filled: true,
          ),
        )

【讨论】：

【解决方案2】：

您可以将一行用作容器的子项

Container(
                  width: 307,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.blueAccent),
                    borderRadius: BorderRadius.circular(10.0),
                    shape: BoxShape.rectangle,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Flexible(
                        child: Image.asset(
                          "assets/images/cover_placeholder.png",
                          height: 30,
                          width: 30,
                          fit: BoxFit.contain,
                        ),
                      ),
                      SizedBox(width: 12,),
                      Flexible(
                        child: CountryListPick(
                          onChanged: (list){
                            print(list?.name);
                          },
                          theme: CountryTheme(
                            labelColor: Colors.white,
                            isShowFlag:true,
                            isShowCode: false,
                            isShowTitle:true,
                            isDownIcon: true,
                            showEnglishName: true,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),

【讨论】：

只有一个问题有没有办法改变标签颜色？我正在使用一个流行的库（country_list_pick）来获取国家/地区列表
@mob_dev 我在 github 中探索了 country_list_pick 库问题列表，但目前他们没有任何选项来更改文本/标签颜色。但是你可以试试这个线程，虽然我没有试过。 github.com/hifiaz/country-list-pick/issues/30

【解决方案3】：

So you can use SizedBox or Container - 
     SizedBox(
              width: 300.0,
              height: 120.0,
              child: Padding(
                padding: const EdgeInsets.all(5.0),
                child: Container(
                  child: Row(
                    children: <Widget>[
                      Material(
                        type: MaterialType.transparency,
                        child: Stack(
                          children: <Widget>[
                            Column(
                              children: <Widget>[
                                Container(
                                  padding: const EdgeInsets.only(
                                      top: 1.0, bottom: 1.0, right: 5.0),
                                  height: 50.0,
                                  width: 50.0,
                                  decoration: BoxDecoration(
                                    borderRadius:
                                        BorderRadius.circular(15.0),
                                    color: Colors.green[50],
                                  ),
                                  child: IconButton(
                                    icon: Icon(Icons.favorite),
                                    color: Colors.red[700],
                                    highlightColor: Colors.red,
                                    onPressed: () {},
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),

【讨论】：