Nrthugu

When I add a image to the card, the Radius at the top of the card are covered. How can I solve it?

When I add a image to the card, the Radius at the top of the card are covered. How can I solve it?

class App extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: ThemeData(primarySwatch: Colors.yellow),

      home: Scaffold(

          backgroundColor: Colors.grey[200],

          appBar: AppBar(title: Text('Demo'),),

          body: SizedBox(

              height: 310.0,

              child: Card(

                elevation: 3.0,

                color: Colors.white,

                margin: EdgeInsets.all(8.0),

                child: Column(

                  crossAxisAlignment: CrossAxisAlignment.start,

                  children: <Widget>[

                    SizedBox(height: 0.0,),

                    Image.network('https://img.zcool.cn/community/012157578c405f0000012e7e69e7cd.jpg@1280w_1l_2o_100sh.jpg'),

                    SizedBox(height: 16.0,),

                    Row(

                      children: <Widget>[

                        SizedBox(width: 16.0,),

                        Text('素雪', style: Theme.of(context).textTheme.headline,),

                        SizedBox(width: 16.0,),

                        Text('吉时已到', style: Theme.of(context).textTheme.subhead,),

                      ],

                    ),

                    SizedBox(height: 16.0,),

                  ],

                ),

              ))),

    );

  }

}

This is the rendering

https://i.stack.imgur.com/REjs7.png

You can set clipBehavior for Card:

Card(

      clipBehavior: Clip.antiAliasWithSaveLayer, ...

Or you can wrap your image in ClipRRect

ClipRRect(

  borderRadius: BorderRadius.vertical(top: Radius.circular(4.0)),

  child: Image.network(...),

)

You need to put your image in a Container or a DecoratedBox and set the BorderRadius on the BoxDecoration.

     children: <Widget>[

        .....

        Container(

          width: double.maxFinite,

          height: 220.0,

          decoration: BoxDecoration(

            borderRadius:

                BorderRadius.vertical(top: Radius.circular(5.0)),

            image: DecorationImage(

              image: NetworkImage(

                  'https://img.zcool.cn/community/012157578c405f0000012e7e69e7cd.jpg@1280w_1l_2o_100sh.jpg'),

            fit: BoxFit.cover,

            ),

          ),

        ),

        ...

      ]