Flutter 中的 SimpleDialogOption 文本和图像

Question

我用 SimpleDialogOption 创建了一个弹出菜单。但是，我不能同时添加图像和文本。

  child: new SimpleDialog(
    title: new Text('Select your team',
    textAlign: TextAlign.center,
    style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                  letterSpacing: 1.3,
                  color: Colors.redAccent[700],
                    ),),
    children: <Widget>[

      new SimpleDialogOption(child: new Text('ANK'),onPressed: (){Navigator.pop(context, Answers.ANK);},),
      new SimpleDialogOption(child: new Text('ANT'),onPressed: (){Navigator.pop(context, Answers.ANT);},),

在这里，我想要一张ANK的图片和一张ANT的图片。文字应位于图片下方。

Answer 1

如果我理解正确，您需要一个专栏：

SimpleDialogOption(child: Column(
      children: <Widget>[
        Image(),
        Text("ANK")
      ],
    ));

Answer 2

像这样：

showDialog(
  context: context,
  builder: (context) {
    return SimpleDialog(
      title: Text('Title', 
        textAlign: TextAlign.center, 
        style: TextStyle(
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
          letterSpacing: 1.3,
          color: Colors.redAccent[700],
        ),
      ),
      children: <Widget>[
        SimpleDialogOption(child: Column(
          children: <Widget>[
            Image.asset('assets/Image.png', height: 140, fit: BoxFit.contain,), // Your image here
            SizedBox(height: 10,), // Optional to give some extra space
            Text('Image 1'),
          ],
        ),onPressed: () {},),
        SimpleDialogOption(child: Column(
          children: <Widget>[
            Image.asset('assets/Image.png', height: 140, fit: BoxFit.contain,),
            SizedBox(height: 10,),
            Text('Image 2'),
          ],
        ),onPressed: () {},),
      ],
    );
  }
);

结果：

希望对您有所帮助

Flutter 中的 SimpleDialogOption 文本和图像

SimpleDialogOption text and image in Flutter

text

image

popup

dart

flutter