CODEWITHSUNDEEP
user-interfaceflutterdartcardview
Thorvald
Thorvald

Reputation: 3563

Building custom card using Flutter/Dart

I am trying to build a custom Card using Dart/Flutter widgets, below is the shell of the widget, I am having trouble in positioning elements using Dart!

The card's width is intended to take the whole screen's width with the ability to scroll between two of them horizontally, the title and the content are loaded dynamically using JSON.

Q: I am currently stuck in building this particular UI, how to go from the code provided below ?

This what I have done:

class BottomCards extends StatefulWidget {
  final String cardTitle;
  final String cardContent;
  BottomCards(this.cardTitle, this.cardContent);
  @override 
  _BottomCardsState createState() => _BottomCardsState();
}

class _BottomCardsState extends State<BottomCards>{
@override
Widget build(BuildContext context) {
  return Center(
    child: Card(
      child: InkWell(
        splashColor: Colors.blue.withAlpha(30),
        onTap: () {},
        child: Container(
          child: Padding( 
            padding: EdgeInsets.all(12.0),
            child: Row(
              children: <Widget>[
                Text(widget.cardTitle),
                Spacer(),
                new ButtonBar(
                  children: <Widget>[
                    new IconButton(
                      icon: Icon(CardsIcons.arrows_ccw),
                      //onPressed: REFRESH,
                    ),
                    new IconButton(
                      icon: Icon(CardsIcons.heart_empty, color: Colors.redAccent,),
                      //onPressed: BOOKMARK,
                    ),
                    new IconButton(
                      icon: Icon(CardsIcons.content_copy),
                      //onPressed: COPY,
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    ),
  );
 }
}

This is the desired output enter image description here

Upvotes: 3

Views: 8007

Answers (1)

Arjunraj kokkadan
Arjunraj kokkadan

Reputation: 488

Set the height and width of the card and you will be good to go.

set the height to be the desired height.

While you want your card to take the width of the screen use MediaQuery to get the width of the screen. like,

width: MediaQuery.of(context).size.width

Upvotes: 3

Related Questions