颤动问题：如何制作带有居中文本和右侧图标的按钮

Question

我想制作一个按钮，在这个按钮中我想要一个文本和一个图标，但是文本应该在中间，图标应该在右边。

这是按钮的代码。

  bottomNavigationBar: Padding(
        padding:
            const EdgeInsets.only(top: 20.0, bottom: 20, left: 20, right: 20),
        child: SizedBox(
          height: 45,
          width: MediaQuery.of(context).size.width,
          child: FlatButton(
            onPressed: () {
              _controller.nextPage(
                duration: const Duration(milliseconds: 200),
                curve: Curves.easeIn,
              );
              if(_currentPage + 1 == splashData.length){
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => HomePage()));
              }
              
            },
            child: Row(mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
    
                  "Next",
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.white,
                  ),
                ),
                SizedBox(width: 50,),
                Padding(
                  padding: const EdgeInsets.only(right: 10),
                  child: Icon(Icons.arrow_forward,color: whiteColor,),
                )
              ],
            ),

            color: skyBlue,
          ),
        ),
      ),

我想要这个按钮

但正在变成这样。

Answer 1

尝试下面的代码，使用 Opacity 小部件并设置 opacity:0

注意：不要使用 FlatButton 它被 Flutter 所描述用于代替 ElevatedButton、TextButton

参考 here 新按钮

  ElevatedButton(
        onPressed: () {
          //write your onPressed function here
          print('Pressed');
        },
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Opacity(
              opacity: 0,
              child: Icon(Icons.arrow_forward),
            ),
            Text('Next'),
            Icon(Icons.arrow_forward),
          ],
        ),
      ),

您的结果屏幕->

Answer 2

您可以使用 Expanded（如果需要，可以使用 flex 属性）。还要添加一个 Align

例如：

            Row(mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(),
                Expanded(
                  child: Text(
                    "Next",
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.white,
                    ),
                  ),
                ),
                Expanded(
                  child: Align(
                    alignment: Alignment.centerRight,
                    child: Padding(
                      padding: const EdgeInsets.only(right: 10),
                      child: Icon(Icons.arrow_forward,color: whiteColor),
                    ),
                  ),
                ),
              ],
            ),

Answer 3

可以用Stack代替Row来轻松实现。在 Stack 中，您也可以使用 Positioned(right: 10, child: Icon())。

      Stack(
            alignment: Alignment.center,
            children: const [
              Text(

                'Next',
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.white,
                ),
              ),
            Align(
              alignment: Alignment.centerRight,
              child: Icon(Icons.arrow_forward, color: Colors.white,),
            )
            ],
          )

我们有两种以上的方法来实现它。我给出了两个最简单的选择来实现它。

颤动问题：如何制作带有居中文本和右侧图标的按钮

flutter problem: How to make button with centered text and right side Icon

flutter

flutter-layout

flutter-dependencies

flutter-animation

flutter-test