import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Material(child: MyStatefulWidget())
)
);
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
bool toggleOuterColor = true;
bool toggleInnerColor = true;
@override
Widget build(BuildContext context) {
return Center(
child: Listener(
onPointerDown: (_) {
setState(() {
toggleOuterColor = !toggleOuterColor;
});
},
child: Container(
width: 200, height: 200,
color: toggleOuterColor ? Colors.amber : Colors.amber.shade900,
child: Center(
// child: Container(width: 100, height: 100, color: Colors.black)
child: Listener(
onPointerDown: (_) {
setState(() {
toggleInnerColor = !toggleInnerColor;
});
},
child: Container(
width: 100, height: 100,
color: toggleInnerColor ? Colors.blue : Colors.blue.shade800,
)
)
)
)
)
);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.