简体   繁体   English

如何将图标添加到盒子装饰?

[英]How can I add an Icon to to Box Decoration?

I want to add an Icon to Box Decoration like this you are seeing images on left side.我想像这样在盒子装饰中添加一个图标,您会在左侧看到图像。

在此处输入图像描述

How do I add this with box decoration我如何在盒子装饰中添加这个

Here is the code:这是代码:

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

You can use this widget for a textfield with boxdecoration and icon:您可以将此小部件用于带有 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,
          ),
        )

You can use a row as a children of container您可以将一行用作容器的子项

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,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
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: () {},
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM