Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to highlight the border of a card selected?

Tags:

flutter

dart

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.

like image 435
heyr Avatar asked Jan 19 '26 20:01

heyr


2 Answers

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;
                  });
                })
          ],
        ),
      ),
    );
  }
}
like image 67
Ajay Kumar Avatar answered Jan 23 '26 21:01

Ajay Kumar


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

like image 23
heyr Avatar answered Jan 23 '26 20:01

heyr



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!