SDK Flutter de forme de carte personnalisée

Question

Je viens de commencer à apprendre Flutter et j'ai développé une application avec GridView. Les éléments GridView sont des cartes. La forme de carte par défaut est Rectangle avec un rayon de 4.

Je sais qu'il existe une propriété de forme pour Card Widget et il prend la classe ShapeBorder. Mais je n'arrive pas à trouver comment utiliser la classe ShapeBorder et personnaliser mes cartes dans GridView.

Merci d'avance.

Answer 1

Vous pouvez l'utiliser de cette façon

 Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15.0),
  ),
  child: Text(
    'Card with circular border',
    textScaleFactor: 1.2,
  ),
),
Card(
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: Text(
    'Card with Beveled border',
    textScaleFactor: 1.2,
  ),
),
Card(
  shape: StadiumBorder(
  side: BorderSide(
    color: Colors.black,
    width: 2.0,
  ),
),
  child: Text(
    'Card with Beveled border',
    textScaleFactor: 1.2,
  ),
),
 

Answer 2

Lorsque Card, j'utilise toujours RoundedRectangleBorder.

 Card(
  color: Colors.grey[900],
  shape: RoundedRectangleBorder(
    side: BorderSide(color: Colors.white70, width: 1),
    borderRadius: BorderRadius.circular(10),
  ),
  margin: EdgeInsets.all(20.0),
  child: Container(
    child: Column(
        children: <Widget>[
        ListTile(
            title: Text(
            'example',
            style: TextStyle(fontSize: 18, color: Colors.white),
            ),
        ),
        ],
    ),
  ),
),
 

Answer 3

Vous pouvez également personnaliser le thème de la carte globalement avec ThemeData.cardTheme :

 MaterialApp(
  title: 'savvy',
  theme: ThemeData(
    cardTheme: CardTheme(
      shape: RoundedRectangleBorder(
        borderRadius: const BorderRadius.all(
          Radius.circular(8.0),
        ),
      ),
    ),
    // ...