Skip to content

Instantly share code, notes, and snippets.

@jstuth
Last active August 8, 2019 06:44
Show Gist options
  • Save jstuth/8d00d07bba711aa4ad6b2ec5da6995d2 to your computer and use it in GitHub Desktop.
Save jstuth/8d00d07bba711aa4ad6b2ec5da6995d2 to your computer and use it in GitHub Desktop.
import 'package:flutter/material.dart';
class CarBox extends StatefulWidget {
final String carIconUrl;
final String title;
final bool selected;
final Function onTap;
CarBox(
{Key key, this.carIconUrl, this.title, this.selected = false, this.onTap})
: super(key: key);
_CarBoxState createState() => _CarBoxState();
}
class _CarBoxState extends State<CarBox> {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: widget.onTap,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
side: BorderSide(
width: 1.0,
color: widget.selected ? Colors.green : Colors.transparent,
),
),
elevation: widget.selected ? 5 : 0,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16),
child: Stack(
fit: StackFit.passthrough,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 24),
Opacity(
opacity: widget.selected ? 1 : 0.15,
child: Image.network(
widget.carIconUrl,
width: 100,
color: widget.selected ? Colors.green : Colors.black,
),
),
Text(
widget.title,
style: TextStyle(
color: widget.selected ? Colors.green : Colors.black,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 24),
],
),
Positioned(
right: 0,
top: 0,
child: widget.selected
? Image.network(
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTG_TMUQDYtGHBv6rs-Cin3IPjAaDjrUtjCV8ODUOcGewKOm_cJ",
width: 30,
height: 30,
)
: SizedBox(
width: 30,
height: 30,
),
)
],
),
),
),
);
}
}
import 'package:flutter/material.dart';
class Page extends StatefulWidget {
const Page({Key key}) : super(key: key);
@override
_PageState createState() => _PageState();
}
class _PageState extends State<Page> {
int selectedIndex = -1;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: 200,
child: Row(
children: <Widget>[
CarBox(
carIconUrl:
"https://static.thenounproject.com/png/602733-200.png",
title: "Hatchback",
selected: selectedIndex == 0,
onTap: () => setSelectedIndex(0),
),
CarBox(
carIconUrl: "https://static.thenounproject.com/png/61810-200.png",
title: "Sedan",
selected: selectedIndex == 1,
onTap: () => setSelectedIndex(1),
),
CarBox(
carIconUrl: "https://png.pngtree.com/svg/20160517/e165b2f29c.png",
title: "SUV",
selected: selectedIndex == 2,
onTap: () => setSelectedIndex(2),
),
],
),
),
);
}
void setSelectedIndex(int index) {
setState(() {
if (selectedIndex == index) {
selectedIndex = -1;
} else {
selectedIndex = index;
}
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment