CODEWITHSUNDEEP
flutter
Oto-obong Eshiett
Oto-obong Eshiett

Reputation: 1669

Flutter Cards : How can i create a custom card widget in flutter

I am trying to create a custom card in flutter that looks like this : enter image description here

how can i achieve this in flutter ?

This is what i want to achieve:

enter image description here

Upvotes: 2

Views: 2401

Answers (2)

IonicFireBaseApp
IonicFireBaseApp

Reputation: 1230

import 'package:getwidget/getwidget.dart';

GFCard(
 boxFit: BoxFit.cover,
 image: Image.asset('your asset image'),
 title: GFListTile(
   avatar: GFAvatar(
     backgroundImage: AssetImage('your asset image'),
   ),
   title: Text('Card Title'),
   subTitle: Text('Card Sub Title'),
),
content: Text("Some quick example text to build on the card"),
buttonBar: GFButtonBar(
 children: <Widget>[
   GFButton(
    onPressed: () {},
    text: 'Buy',
   ),
   GFButton(
    onPressed: () {},
    text: 'Cancel',
   ),
 ],
 ),
),

Read complete article for Flutter card - https://docs.getwidget.dev/gf-card/

Upvotes: 0

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

You could use ClipPath for custom clipping your widget

ClipPath(clipper: _CustomClipper(), child: Container(width: 200.0, height: 100.0, color: Colors.grey,),)

(gray container just for example)

const double _topPadding = 20.0;
const double _arcRadius = 8.0;
class _CustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double point = size.width / 3 * 2;
    final path = Path()
      ..moveTo(0.0, _topPadding)
      ..lineTo(point, _topPadding)
      ..lineTo(point, _arcRadius)
      ..lineTo(point + _arcRadius, 0.0)
      ..lineTo(size.width - _arcRadius, 0.0)
      ..lineTo(size.width, _arcRadius)
      ..lineTo(size.width, size.height)
      ..lineTo(0.0, size.height)
      ..lineTo(0.0, _topPadding)
      ..addOval(Rect.fromLTRB(
          point, 0.0, point + 2 * _arcRadius, 2 * _arcRadius))
      ..addOval(Rect.fromLTRB(
          size.width - 2 * _arcRadius, 0.0, size.width, 2 * _arcRadius));

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

UPD - elevated solution

Material(
    color: Colors.yellow,
    clipBehavior: Clip.antiAlias,
    shape: _CustomBorder(),
    elevation: 16.0, child: Container(width: 200.0, height: 100.0, child: Stack(
        children: <Widget>[
            Positioned(child: FittedBox(fit: BoxFit.scaleDown, child: Text('and a text here too'),),left: 140.0, right: 4.0, top: 4.0,),
            Positioned(child: Text('I want a text here', style: TextStyle(fontSize: 24.0),), top: 40.0, left: 4.0,)
        ],
    ),),)
...
class _CustomBorder extends BorderDirectional {
  @override
  Path getOuterPath(ui.Rect rect, {ui.TextDirection textDirection}) {
    Size size = rect.size;
    double point = size.width / 3 * 2;
    final path = Path()
      ..moveTo(0.0, _topPadding)
      ..lineTo(point, _topPadding)
      ..lineTo(point, _arcRadius)
      ..lineTo(point + _arcRadius, 0.0)
      ..lineTo(size.width - _arcRadius, 0.0)
      ..lineTo(size.width, _arcRadius)
      ..lineTo(size.width, size.height)
      ..lineTo(0.0, size.height)
      ..lineTo(0.0, _topPadding)
      ..addOval(Rect.fromLTRB(
          point, 0.0, point + 2 * _arcRadius, 2 * _arcRadius))
      ..addOval(Rect.fromLTRB(
          size.width - 2 * _arcRadius, 0.0, size.width, 2 * _arcRadius));

    path.close();
    return path;
  }
}

Upvotes: 3

Related Questions