Flutter 通过Stack 实现扑克牌效果
/// Flutter code sample for Scaffold.drawer
// To disable the drawer edge swipe, set the
// [Scaffold.drawerEnableOpenDragGesture] to false. Then, use
// [ScaffoldState.openDrawer] to open the drawer and [Navigator.pop] to close
// it.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
List<bool> _clicked = [false, false, false];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Drawer Demo'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Drawer Header',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.message),
title: Text('Messages'),
),
ListTile(
leading: Icon(Icons.account_circle),
title: Text('Profile'),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
body: Container(
width: 300,
height: 300,
color: Colors.yellow,
child: Stack(
children: <Widget>[
Positioned(
bottom: _clicked[0] ? 15 : 10,
right: 50,
child: InkWell(
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
onTap: () {
print("you clicked red");
setState(() {
_clicked[0] = !_clicked[0];
});
},
),
),
Positioned(
bottom: _clicked[1] ? 15 : 10,
right: 30,
child: InkWell(
child: Container(
width: 100,
height: 100,
color: Colors.green,
),
onTap: () {
print("you clicked green");
setState(() {
_clicked[1] = !_clicked[1];
});
},
),
),
Positioned(
bottom: _clicked[2] ? 15 : 10,
right: 10,
child: InkWell(
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
onTap: () {
print("you clicked blue");
setState(() {
_clicked[2] = !_clicked[2];
});
},
),
),
],
),
));
}
}