web-dev-qa-db-fra.com

Flutter Comment créer une carte avec une image de fond?

J'essaie de créer une carte avec une image en arrière-plan. Le problème est que l'image déborde de la carte, donc les coins du ne s'affichent pas.

Je dois définir l'image comme arrière-plan de la carte ou définir le comportement de débordement des cartes sur aucun débordement. Mais je n'ai trouvé aucune propriété pour ça.

Voici ma carte:

Widget _buildProgrammCard() {
  return Container(
    height: 250,
    child: Card(
      child: Image.asset(
        'assets/Push.jpg',
        fit: BoxFit.cover,
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      elevation: 5,
      margin: EdgeInsets.all(10),
    ),
  );

Et cela ressemble à ceci:

enter image description here

enter image description here

dartflutter
14
Jonas

Autre manière sans utiliser - ClipRRect Widget - est de définir semanticContainer: true, de Card Widget.

Exemple de code comme ci-dessous:

Card(
          semanticContainer: true,
          clipBehavior: Clip.antiAliasWithSaveLayer,
          child: Image.network(
            'https://placeimg.com/640/480/any',
            fit: BoxFit.fill,
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          elevation: 5,
          margin: EdgeInsets.all(10),
        ),

Production:

enter image description here

34
anmol.majhail

Vous pouvez envelopper votre image dans ClipRRect

ClipRRect(
  borderRadius: BorderRadius.vertical(top: Radius.circular(10.0)),
  child: Image.network(...),
)
5
Andrey Turkovsky

Pour ceux d'entre vous qui souhaitent afficher le coin de la carte pour dessiner au-dessus de l'image, utilisez maintenant

borderOnForeground: true
0
Jiten Basnet
import 'package:flutter/material.Dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Ejemplo"),
        ),
        body: Center(child: SwipeList()));
  }
}

class SwipeList extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ListItemWidget();
  }
}

class ListItemWidget extends State<SwipeList> {
  List items = getDummyList();

  @override
  Widget build(BuildContext context) {
    return Container(
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Dismissible(
              key: Key(items[index]),
              background: Container(
                alignment: AlignmentDirectional.centerEnd,
                color: Colors.red,
                child: Icon(
                  Icons.delete,
                  color: Colors.white,
                ),
              ),
              onDismissed: (direction) {
                setState(() {
                  items.removeAt(index);
                });
              },
              direction: DismissDirection.endToStart,
              child: Card(
                  margin: EdgeInsets.only(left: 10, right: 10, top: 12),
                  elevation: 8,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12.0),
                  ),
                  semanticContainer: true,
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  child: Container(
                    height: 135,
                    child: Stack(children: <Widget>[
                      Positioned(
                          top: 0,
                          left: 0,
                          right: 0,
                          child: Container(
                              color: Colors.white,
                              child: Column(
                                children: <Widget>[
                                  Image.network(
                                    'https://placeimg.com/640/480/any',
                                    fit: BoxFit.fitHeight,
                                  ),
                                ],
                              ))),
                      Positioned(
                          top: 20,
                          left: 0,
                          right: 0,
                          child: Container(
                            child: Column(
                              children: <Widget>[
                                Text(items[index],
                                    style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontSize: 25,
                                        color: Colors.white),
                                    textAlign: TextAlign.center),
                              ],
                            ),
                          )),
                    ]),
                  )),
            );
          },
        ));
  }

  static List getDummyList() {
    List list = List.generate(5, (i) {
      return "Item ${i + 1}";
    });
    print(list);
    return list;
  }
}
0
Diego Casa