How To Make Card View ,Inkwell in Flutter
Card
Source Code
import 'package:flutter/material.dart';
void main() {
runApp( MaterialApp(
title:"Card",
home:Scaffold(appBar: AppBar(title: Text('Card',),),
body: Material(
child: Center(
child:
CardExample()
,
),
) ,
),
));
}
class CardExample extends StatelessWidget {
const CardExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(8.0),
children: <Widget>[
Card(
color: Colors.red,
// The elevation determines shade.
elevation: 10.0,
child: SizedBox(
height: 100.0,
child: Row(
children: const <Widget>[
Expanded(child: Text('Card 1')),
],
),
),
),
Card(
color: Colors.green,
margin: const EdgeInsets.all(20.0),
elevation: 0.0,
child: SizedBox(
height: 100.0,
child: InkWell(
splashColor: Colors.deepOrange,
onTap: () {},
child: Row(
children: const <Widget>[
Expanded(
child: Text('Card 2 (with Inkwell effect on tap)'),
),
],
),
),
),
),
Card(
color: Colors.blue,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.elliptical(40.0, 80.0),
),
),
child: SizedBox(
height: 100.0,
child: Row(
children: const <Widget>[
Expanded(
child: Text('Card 3 (with custom border radius)'),
),
],
),
),
),
Card(
color: Colors.white,
child: Column(
children: <Widget>[
SizedBox(
height: 180.0,
child: Stack(
children: <Widget>[
Positioned.fill(
child: Image.network(
'https://media.istockphoto.com/photos/los-angeles-skyline-picture-id172458569?k=20&m=172458569&s=612x612&w=0&h=kvgSC5r-vCJCkCWCdU8MiNX5_IeBvQpSrSlWUw-eny0=',
fit: BoxFit.cover,
),
),
Positioned(
bottom: 16.0,
left: 16.0,
right: 16.0,
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.centerLeft,
child: Text(
'Card 4 (complex example)',
style: Theme.of(context)
.textTheme
.headline5!
.copyWith(color: Colors.white),
),
),
)
],
),
),
ButtonBar(
alignment: MainAxisAlignment.end,
children: <Widget>[
TextButton(
onPressed: () {},
child: const Text('SHARE'),
),
TextButton(
onPressed: () {},
child: const Text('EXPLORE'),
),
],
),
],
),
),
],
);
}
}
Comments
Post a Comment