web-dev-qa-db-ja.com

ボックス内の固定サイズで画像を処理する方法

Flutterは初めてですが、気に入っていますが、建物のレイアウトは快適ではありません。

カードのリストビューを含むアプリに取り組んでいます。各カードはコンテナ内にあり、画像(高さと幅が固定)とテキストが含まれています。

カード内に画像を正しく配置できません。画像がボックスの幅をカバーするようにします。ありがとう。

enter image description here

これはコードです:

import 'package:flutter/material.Dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'MyApp';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView(
          children: <Widget>[
              Container(
                    margin:EdgeInsets.all(8.0),
                    child: Card(
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
                        child: InkWell(
                           onTap: () => print("ciao"),     
                           child: Column(
                                children: <Widget>[
                                    ClipRRect(
                                      borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(8.0),
                                        topRight: Radius.circular(8.0),
                                      ),
                                      child: Image.asset(
                                        'img/britannia.jpg',
                                        width: 300,
                                        height: 150,
                                        fit:BoxFit.fill  

                                      ),
                                    ),
                                    ListTile(
                                      title: Text('Pub 1'),
                                      subtitle: Text('Location 1'),
                                    ),
                                ],
                           ),
                        ),
                    ),
              ),
          ],
        ),
      ),
    );
  }
} 
7

フィットプロパティで実行できる場合は、この非常に明確なチートシート(チャプターフィットプロパティ)にすべての詳細を記述します。 https://medium.com/jlouage/flutter-boxdecoration-cheat-sheet-72cedaa1ba2

0
Ferdi