Flutter 我怎么 position 這個文字和圖標在一行？

Question

我無法對齊文本和圖標。 這是我的 output 的樣子：

我希望文本位於圖標的中間左側。 我試過添加邊距和填充。 但是圖標不會與文本對齊，我什至嘗試將圖標放在不同的小部件中。

這是我的代碼：

 Widget buildFollowText() {
return Padding(
    padding: EdgeInsets.only(
      left: 5,
      top: 5,
    ),
    child: Container(
        child: Column(children: [
      Padding(
        padding: EdgeInsets.only(
          left: 0,
          right: 250,
        ),
        child: Text(
          'or follow us on:',
          style: TextStyle(
            fontFamily: "DMSans",
            fontSize: 15,
            fontWeight: FontWeight.w600,
            letterSpacing: -0.3,
            color: Colors.grey,
          ),
        ),
      ),
      Container(
        width: 50,
        height: 30.0,
        margin: EdgeInsets.only(
          right: 70,
          bottom: 10,
        ),
        child: buildIcons(),
      )
    ])));
  }

Widget buildIcons() {
return Padding(
    padding: EdgeInsets.only(
      top: 0,
    ),
    child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: new Padding(
              padding: const EdgeInsets.only(bottom: 50.0),
              child: Icon(
                MdiIcons.facebook,
                color: Colors.blue,
                size: 50,
              ),
            ),
          ),
          Expanded(
            child: new Padding(
              padding: const EdgeInsets.only(bottom: 50.0, left: 40),
              child: Icon(
                MdiIcons.twitter,
                color: Colors.blue,
                size: 50,
              ),
            ),
          )
        ]));
     }

Answer 1

檢查下面的代碼

Container(
  child: Column(
    children: [
      // text container
      Container(
        alignment: Alignment.centerLeft,
        child: Text('or follow us on:'),
      ),
      // icon container
      Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.face,
              color: Colors.blue,
              size: 30,
            ),
            Icon(
              Icons.transfer_within_a_station_rounded,
              color: Colors.blue,
              size: 30,
            )
          ],
        ),
      )
    ],
  ),
);

Answer 2

1. 刪除填充。
2. 為列設置 mainAxisAlignment 中心。
3. 用 Row() 包裹 Text('or follow us on') 並設置 mainAxisAlignment.center。

遵循此代碼。

填充（填充：EdgeInsets.only（左：5，頂部：5，），子：容器（寬度：double.infinity，子：列（mainAxisAlignment：MainAxisAlignment.center，子：[行（mainAxisAlignment：MainAxisAlignment.center，子: [ Text('或關注我們：', style: TextStyle( fontFamily: "DMSans", fontSize: 15, fontWeight: FontWeight.w600, letterSpacing: -0.3, color: Colors.grey, ), ), ], ) ，容器（寬度：50，高度：30.0，邊距：EdgeInsets.only（右：70，底部：10，），子：buildIcons（），）]，），），），

Answer 3

 Scaffold(
            body: Container(
              child: Row(
                children: [
                  // text container
                  Container(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text('or follow us on:'),
                      ],
                    ),
                  ),
    
                  // icon container
                  Container(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Icon(
                              Icons.face,
                              color: Colors.blue,
                              size: 30,
                            ),
                            Icon(
                              Icons.transfer_within_a_station_rounded,
                              color: Colors.blue,
                              size: 30,
                            )
                          ],
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          )