Flutter中Right Overflowed by 101 Pixels问题解决方案咨询

你的问题出在Row组件内的Text没有足够空间自动换行，用Wrap会导致图标与文本分离，推荐给Text外层包裹Expanded组件——它会让Text占据Row的剩余可用空间，自动换行的同时，保持图标和文本始终在同一行开头位置。

修改后的代码如下：

SliverToBoxAdapter(
  child: Column(
    children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          width: MediaQuery.of(context).size.width,
          color: Colors.white,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Row(
                  children: [
                    Icon(
                      Icons.check_box,
                      color: Colors.green,
                    ),
                    Expanded( // 添加Expanded包裹Text
                      child: Text('Unlock all exam questions'),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Icon(
                      Icons.check_box,
                      color: Colors.green,
                    ),
                    Expanded( // 添加Expanded包裹Text
                      child: Text(
                          'Guaranteed to pass! We will refund you if you dont!'),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(
                      top: 15.0, left: 20, right: 20),
                  child: SizedBox(
                    width: MediaQuery.of(context).size.width,
                    height: 60,
                    child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.green),
                        onPressed: () {
                          this._requestPurchase(_items[0]);
                        },
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text('Unlock Premium'),
                            Text('£4.95'),
                          ],
                        )),
                  ),
                )
              ],
            ),
          ),
        ),
      )
    ],
  ),
),

Text默认开启softWrap: true，配合Expanded就能完美解决文本溢出问题，同时保证图标与文本的布局一致性。

内容的提问来源于stack exchange，提问作者Abdullah Ergun