Last active
March 29, 2021 17:49
-
-
Save r100-stack/1e42d0b288dfbb919d2a9bdc5b089c8d to your computer and use it in GitHub Desktop.
ClipRRect Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| void main() { | |
| runApp(MyApp()); | |
| } | |
| class MyApp extends StatelessWidget { | |
| // This widget is the root of your application. | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| title: 'Flutter Demo', | |
| debugShowCheckedModeBanner: false, | |
| theme: ThemeData( | |
| primarySwatch: Colors.blue, | |
| ), | |
| home: ClipRRectDemo(), | |
| ); | |
| } | |
| } | |
| class ClipRRectDemo extends StatefulWidget { | |
| @override | |
| _ClipRRectDemoState createState() => _ClipRRectDemoState(); | |
| } | |
| class _ClipRRectDemoState extends State<ClipRRectDemo> { | |
| bool isClip = false; | |
| @override | |
| Widget build(BuildContext context) { | |
| double borderRadiusValue = isClip ? 25.0 : 0.0; | |
| // Example 1 | |
| BorderRadius borderRadius = BorderRadius.circular(borderRadiusValue); | |
| // Example 2 | |
| // BorderRadius borderRadius = BorderRadius.all( | |
| // Radius.elliptical(borderRadiusValue, borderRadiusValue * 4), | |
| // ); | |
| // Example 3 | |
| // BorderRadius borderRadius = BorderRadius.only( | |
| // topLeft: Radius.circular(borderRadiusValue), | |
| // bottomRight: Radius.circular(borderRadiusValue), | |
| // ); | |
| return Scaffold( | |
| appBar: AppBar( | |
| backgroundColor: Colors.purple, | |
| title: Text('ClipRRect Demo'), | |
| ), | |
| body: Center( | |
| child: Column( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| children: [ | |
| GestureDetector( | |
| onTap: () => setState(() => isClip = !isClip), | |
| child: AnimatedContainer( | |
| curve: Curves.decelerate, | |
| duration: Duration(seconds: 1), | |
| decoration: BoxDecoration( | |
| borderRadius: borderRadius, | |
| color: Colors.red, | |
| ), | |
| height: 200.0, | |
| width: 200.0, | |
| ), | |
| ), | |
| const SizedBox( | |
| height: 30.0, | |
| ), | |
| GestureDetector( | |
| onTap: () => setState(() => isClip = !isClip), | |
| child: ClipRRect( | |
| borderRadius: borderRadius, | |
| child: Image( | |
| height: 200.0, | |
| width: 200.0, | |
| image: NetworkImage( | |
| 'https://upload.wikimedia.org/wikipedia/en/0/00/The_Child_aka_Baby_Yoda_%28Star_Wars%29.jpg'), | |
| ), | |
| ), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment