7Span
Published in

7Span

Mysterious Widgets - My First Flutter Festival Talk

My First Flutter Festival Flutter Developer Group Kozhikode

Hello everyone,

Here I have given my First #FlutterFestival talk and I am thankful to Flutter Developer Group — Kozhikode for giving me the opportunity by invited as a Speaker & share my knowledge with the community.

I always love to share new things with the developers. Here I’ve chosen that topic just because I can share something new with developers which is might not be known.

I have prepared some widgets which may be unknown to most developers. So let's start with the list of Mysterious Widgets.

1. Error Widget:

  • Display custom widget instead of the scary RED color screen while debugging the app.
  • This kind of error will be displayed when the builder fails to build a widget.
  • Try out for release mode, and do let me know in a comment whether is it working or not. :P
  • For more visit official docs

Here is the code:

  • First of all, you have to write the builder inside the MaterialApp.
return MaterialApp(
title: 'Flutter Demo',
builder: (context, widget) {
ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
return DemoErrorWidget(
errorDetails: errorDetails, // [Optional]
);
};
return widget!;

},
theme: ThemeData(
primarySwatch: Colors.blue,
),
// home: const MyHomePage(title: 'Flutter Festival'),
home: const MyHomePage(title: 'Change Widgets Accordingly'),
);
}

You can create DemoErrorWidget with your own custom UI.

Here is the output of what I have done.

Custom Error Widget instead of Scary Red Screen

Additionally, visit this link to check how we can handle all kinds of errors in Flutter.

2. ExactAssetImage:

  • Scale your image based on device pixel ratio and size
  • Requires an explicit final assetName and scale in constructor

Here is the code:

Container(
width: 400, // Just an example
color: Colors.green,
child: const Image(
image: ExactAssetImage(
'assets/images/dash.png',
scale: 2, // It will scale the image by 2
),
),
)

Check out the full code here.

Output:

ExactAssestImage Example

3. FractionallySizedBox:

  • Sizes its child to a fraction of the total available space

Let's look into a code directly to understand it easily.

Container(
width: double.maxFinite,
color: Colors.black45,
child: FractionallySizedBox(
widthFactor: 0.7,
child: ElevatedButton(
onPressed: () {
setState(() {
width += 50;
});
},
child: const Text('Button'),
),
),
),

Check the full code here.

Here is the output of the full code:

FractionallySizedBox

In this output, you can see the second button has spaces on both sides. It will automatically resize based on Container’s width. Try out the demo and do let me know how is it.

4. ImageFiltered:

  • Applies an ImageFilter to its child.
  • You can do Blur & Matrix (like translation, scaling, rotating, etc.)
  • In Flutter, everything is a widget so you can pass anything to a child.

Here is the code:

ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 5),
child: const Text(
'Flutter Festival',
style: TextStyle(fontSize: 30),
),
),

Output:

ImageFiltered Widget

Here is the full snippet with a matrix example.

5. ListWheelScrollView:

  • A box in which children on a wheel can be scrolled.
  • We can say its a cool 3D ListView
  • All children must be the same size along the scrolling axis.

Here is the code:

ListWheelScrollView(
itemExtent: 150,
offAxisFraction: 0,
diameterRatio: 3,
children: List.generate(
50,
(index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 200,
width: double.maxFinite,
child: Center(child: Text('Index $index')),
color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
.withOpacity(1.0),
),
),
),
),

Output:

ListWheelScrollView

You can check the full code here.

Is this end? — Nope.

Yeah… The end is here.. but I have one surprise for you :)

Bonus: Try out to write Animated and check suggestions.

Don't forget to try it out and comment here on what you found.

Thank you so much for reading.

Keep clapping 👏 (you can appreciate it by clapping 50 times.)

Happy to help anytime. Connect with me on LinkedIn 🎉 😄

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store