Question

我正在尝试创建一个圆形图像按钮。为此，我将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,
    );
  }
}

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

Answer 1

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

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"),
      ),
    );
  }
}

请注意，当您点击图像按钮时，您做的不好，请不要使setState async。

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。但是请注意，上面的代码段实现与之相同：

导入'pack

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
          ),
          ),
        ),
        ),
    );
  }
}

还有其他方法。

Flutter-FlatButton内根本不显示图像

1 个答案: