CODEWITHSUNDEEP
dartflutter
heyr
heyr

Reputation: 5784

How to highlight the border of a card selected?

This is my card

I would like to highlight the border of this card whenever is selected, so the user will see that specific card has been selected.

Upvotes: 15

Views: 35902

Answers (2)

Ajay
Ajay

Reputation: 16300

Try this !

The Result : demo

The Code :

import 'package:flutter/material.dart';

void main() => runApp(
      new MaterialApp(
        home: new MyApp(),
      ),
    );

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("NonstopIO"),
      ),
      body: new ListView.builder(
        itemCount: 5,
        itemBuilder: (BuildContext context, int index) {
          return new MyCustomWidget(
            title: "Title $index",
            subtitle: "$index",
          );
        },
      ),
    );
  }
}

class MyCustomWidget extends StatefulWidget {
  final String title;
  final String subtitle;

  const MyCustomWidget({Key key, this.title, this.subtitle}) : super(key: key);

  @override
  _MyCustomWidgetState createState() => _MyCustomWidgetState();
}

class _MyCustomWidgetState extends State<MyCustomWidget> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return new Card(
      shape: selected
          ? new RoundedRectangleBorder(
              side: new BorderSide(color: Colors.blue, width: 2.0),
              borderRadius: BorderRadius.circular(4.0))
          : new RoundedRectangleBorder(
              side: new BorderSide(color: Colors.white, width: 2.0),
              borderRadius: BorderRadius.circular(4.0)),
      child: new Padding(
        padding: const EdgeInsets.all(4.0),
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Text(widget.title),
            new Text(widget.subtitle),
            new Checkbox(
                value: selected,
                onChanged: (value) {
                  setState(() {
                    selected = value;
                  });
                })
          ],
        ),
      ),
    );
  }
}

Upvotes: 53

heyr
heyr

Reputation: 5784

I found something useful and similar to what I would like to achieve. Flutter - I want to select the card by onLongPress?

Upvotes: 1

Related Questions