web-dev-qa-db-ja.com

フラッターでBoxFit.containを使用して画像の角を丸める方法

私の問題は、特定のサイズのコンテナーで画像をラップし、BoxFit.containプロパティを使用して画像を丸めない場合です。以下の画像をチェックアウトしてください： image link
画像がコンテナいっぱいに拡大できないため、画像自体が丸くなると思います。 BoxFit.coverを使用できることはわかっていますが、スペースと任意のサイズのイメージに制限があるため、BoxFit.containを使用します。私のコード：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          color: Colors.red,
          height: 300,
          width: 300,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(16),
            child: Image.network(
              'https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg',
              fit: BoxFit.contain,
            ),
          ),
        ),
      ),

    );
  }
imageflutterflutter-layout
3
Payam Zahedi

BoxFit.fillを使用してみてください。正しく理解している場合は、これが達成したいことです。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text("My image size"),
      ),
      body: Center(
        child: Container(
          color: Colors.red,
          height: 300,
          width: 300,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(16),
            child: Image.network(
              'https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg',
              fit: BoxFit.fill,
            ),
          ),
        ),
      ),
    );
  }

コードペンのデモに入れる

質問の回避策の編集：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Future<Widget> getImage() async {
      final Completer<Widget> completer = Completer();

      final url = 'https://i.stack.imgur.com/lkd0a.png';
      final image = NetworkImage(url);
      final config = await image.obtainKey(const ImageConfiguration());
      final load = image.load(config);

      final listener = new ImageStreamListener((ImageInfo info, isSync) async {
        print(info.image.width);
        print(info.image.height);

        completer.complete(Container(
            child: Image(
          image: image,
          height: info.image.height.toDouble(),
          width: info.image.width.toDouble(),
        )));
      });

      load.addListener(listener);
      return completer.future;
    }

    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text("My image size"),
      ),
      body: Center(
        child: FutureBuilder<Widget>(
          future: getImage(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return snapshot.data;
            } else {
              return Text('LOADING...');
            }
          },
        ),
      ),
    );
  }
}
0
Firas BENMBAREK

ウィジェットをフラッター付きのClipOvalでラップするだけです。

このドキュメントをご覧ください： https://api.flutter.dev/flutter/widgets/ClipOval-class.html

0
Suthura Sudharaka