import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Torch Effect'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _updateLocation(PointerEvent details) {
_offsetNotifier.value = Offset(details.position.dx, details.position.dy);
}
final _offsetNotifier = ValueNotifier<Offset>(Offset(100, 100));
@override
void dispose() {
// TODO: implement dispose
_offsetNotifier.dispose();
super.dispose();
}
String image1 =
'https://mymodernmet.com/wp/wp-content/uploads/2021/04/Nature-Sounds-For-Well-Being-03.jpg';
String image2 = 'https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg';
@override
Widget build(BuildContext context) {
_image(x) => Image.network(
'$x',
fit: BoxFit.fitHeight,
);
return Scaffold(
backgroundColor: Colors.black.withOpacity(0.9),
body: ValueListenableBuilder<Offset>(
valueListenable: _offsetNotifier,
builder: (
BuildContext context,
Offset offset,
Widget? child,
) {
return MouseRegion(
cursor: SystemMouseCursors.click,
onHover: _updateLocation,
child: Stack(
alignment: Alignment.center,
fit: StackFit.expand,
children: [
const Opacity(opacity: 0.2, child: Counter()),
ClipPath(
clipper: CircleRevealClipper(
center: Offset(offset.dx, offset.dy),
radius: 100,
),
child: _image(image2)),
],
));
}),
);
}
}
class Counter extends StatelessWidget {
const Counter({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'100',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
class CircleRevealClipper extends CustomClipper<Path> {
final Offset center;
final double radius;
CircleRevealClipper({required this.center, required this.radius});
@override
Path getClip(Size size) {
return Path()..addOval(Rect.fromCircle(radius: radius, center: center));
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return true;
}
}
Last active
September 14, 2021 05:49
-
-
Save maheshj01/a8f2f121d91820a683d6eb62b87b22b0 to your computer and use it in GitHub Desktop.
Torch Effect flutter
Apple Logo Shape
Custom Shape
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Torch Effect'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _updateLocation(PointerEvent details) {
_offsetNotifier.value = Offset(details.position.dx, details.position.dy);
}
final _offsetNotifier = ValueNotifier<Offset>(Offset(100, 100));
@override
void dispose() {
// TODO: implement dispose
_offsetNotifier.dispose();
super.dispose();
}
String image1 =
'https://mymodernmet.com/wp/wp-content/uploads/2021/04/Nature-Sounds-For-Well-Being-03.jpg';
String image2 = 'https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg';
@override
Widget build(BuildContext context) {
_image(x) => Image.network(
'$x',
fit: BoxFit.fitHeight,
);
return Scaffold(
backgroundColor: Colors.black.withOpacity(0.9),
body: ValueListenableBuilder<Offset>(
valueListenable: _offsetNotifier,
builder: (
BuildContext context,
Offset offset,
Widget? child,
) {
return MouseRegion(
cursor: SystemMouseCursors.click,
onHover: _updateLocation,
child: Stack(
alignment: Alignment.center,
fit: StackFit.expand,
children: [
const Opacity(opacity: 0.2, child: Counter()),
ClipPath(
clipper: CircleRevealClipper(
center: Offset(offset.dx, offset.dy),
radius: 100,
),
child: _image(image2)),
],
));
}),
);
}
}
class Counter extends StatelessWidget {
const Counter({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'100',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
class CircleRevealClipper extends CustomClipper<Path> {
final Offset center;
final double radius;
CircleRevealClipper({required this.center, required this.radius});
@override
Path getClip(Size size) {
Path path_0 = Path();
path_0.moveTo(size.width * 0.2833333, size.height * 0.1428571);
path_0.quadraticBezierTo(size.width * 0.3056667, size.height * 0.1652857,
size.width * 0.3333333, size.height * 0.1000000);
path_0.quadraticBezierTo(size.width * 0.3540083, size.height * 0.0680429,
size.width * 0.3500000, size.height * 0.0142857);
path_0.quadraticBezierTo(size.width * 0.3239583, size.height * 0.0278857,
size.width * 0.3000000, size.height * 0.0571429);
path_0.quadraticBezierTo(size.width * 0.2814500, size.height * 0.0978000,
size.width * 0.2833333, size.height * 0.1428571);
path_0.close();
path_0.moveTo(size.width * 0.2916667, size.height * 0.1857143);
path_0.quadraticBezierTo(size.width * 0.3690417, size.height * 0.1177000,
size.width * 0.4166667, size.height * 0.2142857);
path_0.lineTo(size.width * 0.4000000, size.height * 0.2285714);
path_0.quadraticBezierTo(size.width * 0.3786583, size.height * 0.2621714,
size.width * 0.3750000, size.height * 0.3142857);
path_0.quadraticBezierTo(size.width * 0.3740500, size.height * 0.4049857,
size.width * 0.4250000, size.height * 0.4428571);
path_0.quadraticBezierTo(size.width * 0.4045333, size.height * 0.4943571,
size.width * 0.4000000, size.height * 0.5142857);
path_0.cubicTo(
size.width * 0.3748250,
size.height * 0.5839000,
size.width * 0.3577417,
size.height * 0.6141429,
size.width * 0.3250000,
size.height * 0.5857143);
path_0.cubicTo(
size.width * 0.2958417,
size.height * 0.5718714,
size.width * 0.3031167,
size.height * 0.5761286,
size.width * 0.2833333,
size.height * 0.5714286);
path_0.cubicTo(
size.width * 0.2527833,
size.height * 0.5895000,
size.width * 0.2302917,
size.height * 0.5981143,
size.width * 0.2333333,
size.height * 0.6000000);
path_0.cubicTo(
size.width * 0.1817667,
size.height * 0.5747857,
size.width * 0.1543333,
size.height * 0.4296714,
size.width * 0.1500000,
size.height * 0.4000000);
path_0.quadraticBezierTo(size.width * 0.1372833, size.height * 0.2745286,
size.width * 0.1666667, size.height * 0.2142857);
path_0.quadraticBezierTo(size.width * 0.1785917, size.height * 0.1803286,
size.width * 0.2166667, size.height * 0.1571429);
path_0.quadraticBezierTo(size.width * 0.2360333, size.height * 0.1611000,
size.width * 0.2583333, size.height * 0.1714286);
path_0.quadraticBezierTo(size.width * 0.2883583, size.height * 0.1857143,
size.width * 0.2916667, size.height * 0.1857143);
path_0.close();
return path_0;
// return Path()..addOval(Rect.fromCircle(radius: radius, center: center));
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return true;
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Screen.Recording.2021-08-29.at.7.43.19.PM.mov