Flutter Tips 36-42
May 18, 2020 • ☕️ 4 min read
#Day36 Implicit Interface of class
Did you know you can extend and implement a class in Dart?
- No need to create
IInterface
to mock aclass
. - No need to extract
IInterface
as Contract / Protocal
Every class implicitly defines an interface containing all the instance variables, methods getter and setters.
- extends -> must override abstract methods, other methods and variables override optional. i.e can inherit parent’s behavior.
-
implements -> Every methdos and variables must be overriden. i.e. can’t inherit parent behavior
Dart has implicit Interface of every class class A { //Optional @override for 'extends' && must for 'implements'. var name; //Optional @override for 'extends' && must for 'implements'. void normalMethod() => print("B -> Normal Method"); } abstract class B{ //must @override in both 'extends' and 'implements'. void abstractMethod(); } //Non abstract class C extends A {} // ✅ class C implements A {} //❌ Must override name & normalMethod() class C extends B {} //❌ Needs to override `abstractMethod()` class C implements B {} //❌ Needs to override `abstractMethod()` //Abstract Child abstract class C extends A {} // ✅ abstract class C implements A {} // ✅ abstract class C implements B {} // ✅ abstract class C extends B {} // ✅
#Day37 Animated Switcher
Use Animated Switcher
for smooth transition when a widget is switched with another.
Provide:
duration
of transition- dynamic
child
& TransitionBuilder
likeFade,Scale,Rotation
Then, Flutter will handle the rest.
AnimatedSwitcher(
duration: Duration(milliseconds: 800),
child: shouldShowCard ? CreditCardFront() : CreditCardBack(),
transitionBuilder: (child, animation) {
print("Animation asked ${widget.runtimeType}");
return FadeTransition(
child: child,
opacity: animation,
);
},
)
#Day38 GestureDetector widget
Use Gesture Detector to detect gestures like tap, double Tap, press, LongPress, pan, drag, zoom etc.
All those callbacks behave like onClick(){}
on Button.
GestureDetector(
onTap: //Tapped
onDoubleTap: //"Double Tapped
onLongPress: //Long Press
onLongPressEnd: //Long Press ends
onPanStart: // Pan Started
onPanUpdate: //"Pan" + paninfo.delta
onPanEnd: //Pan Ended
onHorizontalDragStart: //"Drag" + draginfo
child: Padding(
padding: const EdgeInsets.all(48.0),
child: InkWell(
child: Card(
child: Center(
child: Text(
currentGesture.toUpperCase(),
style: TextStyle(fontSize: 20,
fontWeight: FontWeight.w700),
),
),
),
),
),
);
#Day39 Package Animated Text Kit
animatedtextkit provides some cool ways to animate text appearences.
-
Use built in Widget like
RotateAnimatedTextKit(), TextLiquidFill(), ColorizeAnimatedTextKit() etc.
-
& Pass a list of text in constructor
TyperAnimatedTextKit( text: [“Colorize”,“Animated”, “TextKit”,])
- Do additional customization if you want. To do that Look into constructor of each Widgets provided.
#Day40 5 Steps of AnimatedIcon
We can use AnimatedIcon in 5 simple steps.
- Define a Stateful Widget whose state mixins with SingleTickerProviderStateMixin.
- Define an AnimationController inside state with animation duration and pass this into vsync.
- Define a variable that stores wheather animation is at start or end.
- Provide the controller to AnimatedIcon.
- Animate icon by calling
.forward()
or.reverse()
on AnimationController based on the current state of icon.
#Day41 Path Provider( path_provider package
) (common file locations in iOS and Android)
Sometimes we want to get the location of Various common directories like:
Download, Cache, Documents, External Storage, External Cache etc
The package path_provider
is build for exact same reason so that we do not have to deal with Platform specific issues by our own.
- Add pathprovider to pubspect. `pathprovider: ^verison`
-
Use it
//Gives download directory Directory tempDir = await getTemporaryDirectory(); //Gives documents directory Directory docDir = await getApplicationDocumentsDirectory(); //Gives external Storages List<Directory> externalStorages = await getExternalStorageDirectories(); //Gives download directory Directory downloadDir = await getDownloadsDirectory();
#Day42 Flutter ShapeBorder
We can use ShapeBorder to give outline to widgets or Clip them on it’s shape. There are my ShapeBorder like Border, ContinuousRectangleBorder, StadiumBorder, CircleBorder, BeveledRectangleBorder
etc.
-
Use ShapeBorder to give a Widget outline.
Container( decoration: ShapeDecoration( color: Colors.white, shape: // Any shape border ), )
-
Use ShapeBorder to clip a Widget.
ClipPath( clipper: ShapeBorderClipper( shape: // Any shape border ), child: // Any Child to be clipped )