Flutter - 图像在 FlatButton 内根本不显示答案

【问题标题】：Flutter - Image doesn't show at all inside FlatButtonFlutter - 图像在 FlatButton 内根本不显示
【发布时间】：2020-01-02 01:35:58
【问题描述】：

我正在尝试创建一个圆形图像按钮。为此，我在容器中放置了一个 FlatButton，将图像作为按钮的子元素。


  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'User info',
                style: Constants.HEADING_STYLE,
              ),
              Container(
                child: FlatButton(
                  child: getImageWidget(imageUrl),
                  shape: new CircleBorder(),
                  onPressed: () {
                    setState(() async {
                      imageUrl = await uploadImage();                  
                    });
                  },
                ),
                width: 100.0,
                height: 100.0,
              ),
              Form(
                key: _nameFormKey,
                child: Column(
                  children: <Widget> [
                    TextFormField(
                      decoration: const InputDecoration(
                        hintText: 'Username',
                      ),
                      validator: validateName,
                      onChanged: (name) { this.username = name;},
                    ),
                  ],
                ),
              ),
              RaisedButton(
                child: Text('Next'),
                onPressed: () async {
                  isUnique = await isUsernameUnique(username);

                  if(_nameFormKey.currentState.validate()) {
                    saveUserName();
                  }
                } ,               
              ),
            ],
          ),
        ),
      ),
    );
  }

Widget getImageWidget(imagePath) {
  if(imagePath == null || imagePath == "") {
    return FittedBox(
      child: Image(
        image: AssetImage('assets/no_image.png'),
      ),
      fit: BoxFit.fill,
    );
  } else {
    return FittedBox(
      child: Image.network(
        imagePath,
      ),
      fit: BoxFit.fill,
    );
  }
}

但由于某种原因，图像根本没有出现。然而，该按钮是正确的形状，并在按住和点击时做出响应。我尝试将图像直接移动到列中，但它仍然没有显示。我究竟做错了什么？谢谢。

【问题讨论】：

标签： flutter

【解决方案1】：

带有InkWell 小部件的CircleAvator 怎么样。

import 'package:flutter/material.dart';

class CircleImageButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => print("you have tapped on image"),
      child: CircleAvatar(
        backgroundImage: NetworkImage("https://storage.googleapis.com/dev-dot-ai-project-ic.appspot.com/1/2019/03/demo.jpg"),
      ),
    );
  }
}

请注意，当你点击你的图片按钮时，你正在做一件坏事，不要让setStateasync。

FlatButton 可能不是最好的解决方案，因为它有一个带有填充和其他材质样式的按钮主题。您可以创建自定义按钮，让您更加灵活。

如果您仍然需要使用FlatButton，您可以删除FittedBox（重启时会抛出一些错误）并执行以下操作（这可以添加到任何手势小部件）：

  Widget getImageWidget(imagePath) {
    if (imagePath == null || imagePath == "") {
      return buildCircularImage(AssetImage('assets/no_image.png'));
    } else {
      return buildCircularImage(NetworkImage(imagePath));
    }
  }

  Widget buildCircularImage(ImageProvider provider) {
    return Container(
      width: 70,
      height: 70,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
        image: DecorationImage(
          image: provider,
          fit: BoxFit.cover,
        ),
      ),
    );
  }

如果您愿意，可以使用 FloatingActionButton。但请注意，上面的 sn-p 实现也在这里：

导入'包

age:flutter/material.dart';

class FloatingImageButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () => print("button tapped"),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100),
                image: DecorationImage(
              image: NetworkImage("https://storage.googleapis.com/dev-dot-ai-project-ic.appspot.com/1/2019/03/demo.jpg"),
            fit: BoxFit.cover
          ),
          ),
        ),
        ),
    );
  }
}

还有其他方法可以解决这个问题。

【讨论】：