RawMagnifier in Flutter
In this article, you will learn more about the RawMagnifier in the flutter. For the sake of simplicity, I will not use any package for state management.
If you’re looking for the best flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table of Content
Is the Flutter widget worth the hype?
Do You Think?
Let’s first discuss the widget.
Why do we need it?
Today as we proceed into an increasingly digitalized world, we are making all the specialized types of equipment more and more compact to increase portability. Not more than 2 decades ago, we were using desktops for doing all the text and data-related work. However as a decade passed by, we shifted to laptops and screen sizes went smaller.
Again a decade later, we are now dealing with Androids and tablets which have made our work much more convenient. But, as we proceeded to increase compatibility, screen size reduced drastically. What happened next, is that we find it difficult to read texts from PDFs which are made to appear properly on A4-sized sheets.
Introduction:
For tackling that problem,
Flutter has developed an all-new feature RawMagnifier(). What this deals with is that it makes the text appear bigger only in the part where we want it to increase the size. It works on the same concept as we used a magnifier glass on a small text-sized encyclopedia.
What else does it provide? We can arrange the shape of the magnifier according to our wish with many presets available and even the option to customize it ourselves. It not only helps to zoom in on the selectable text but also to zoom the UI elements of any webpage or PDF. An even more fun part is that the size of this tool is adjustable for the user’s needs.
Before start:
Before starting the tutorial, We will create a page to contain our code.
import 'package:flutter/material.dart';
class MagnifierDemo extends StatefulWidget {
const MagnifierDemo({Key? key}) : super(key: key);
@override
State<MagnifierDemo> createState() => _MagnifierDemoState();
}
class _MagnifierDemoState extends State<MagnifierDemo> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Raw Magnifier"),
centerTitle: true,
),
body: const Center(
),
),
);
}
}It will show an empty page and I will put the code in the child.
First I created a directory in the project module and named its assets. Add a sample.txt file to the assets folder.
We can also use a pdf file or image file—any data which you want to magnify for the user.
Also, edit pubspec.yaml file to give a path for sample.txt
Write a method loadData() to load the txt file and I call this method in intiState(). String? data;
void loadData() async {
final loadedData = await rootBundle.loadString('assets/text/sample.txt');
setState(() {
data = loadedData;
});
}
@override
void initState() {
super.initState();
loadData();
}To know more about initState().
initState method – State class – widgets library – Dart API
Called when this object is inserted into the tree. The framework will call this method exactly once for each State…api.flutter.dev
Let’s come to the design part.
I take a text file as a sample. Put it in Container to decore it to look fancy.
Container(
// adding margin
margin: const EdgeInsets.all(10.0),
// adding padding
padding: const EdgeInsets.symmetric(vertical: 10.0,horizontal: 15),
// height should be fixed for vertical scrolling
height: MediaQuery.of(context).size.height*0.9,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
// adding borders around the widget
border: Border.all(
color: Colors.blueAccent,
width: 2.0,
),
),
child: Text( data ?? 'Text File Loading',
),
)
As you see in the above pic. The text is small and difficult to read here’s flutter comes with a solution.
> RawMagnifier()
To use RawMagnifier() widget, Take a Stack() and put GestureDetector() inside it to set position details on drag. Put the Container in a child of the GestureDetector() because a magnifier will appear on it.
Next, add the Positioned widget to the stack on the top of the GestureDetector() and sets it according to your requirement to save position details on drag. I set it at the top left side position.
Stack(
children: <Widget>[
GestureDetector(
onPanUpdate: (DragUpdateDetails details) =>
setState(
() {
dragGesturePosition = details.localPosition;
},
),
child: Container(
// adding margin
margin: const EdgeInsets.all(10.0),
// adding padding
padding: const EdgeInsets.symmetric(vertical: 10.0,horizontal: 15),
// height should be fixed for vertical scrolling
height: MediaQuery.of(context).size.height*0.9,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
// adding borders around the widget
border: Border.all(
color: Colors.blueAccent,
width: 2.0,
),
),
child: Text( data ?? 'Text File Loading',
),
)
),
Positioned(
left: dragGesturePosition.dx,
top: dragGesturePosition.dy,
child: const RawMagnifier(
decoration: MagnifierDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black, width: 3),
),
),
size: Size(180, 70),
magnificationScale: 1.3,
),
)Keep in mind that the child of the GestureDetector is the widget that the magnifier will appear on.
So let’s look at our simple demo of RawMagnifier where we drag, it will magnify the content.
You can also customize the RawMagnifier in different ways using its properties. Change magnify scale and size according to requirements.
A decoration: The MagnifierDecoration () property of RawMagnifier could take our customization to the next level with the RawMagnifier class. By using this we can add borders, change the shape and update the opacity of the magnifier.
I used RoundedRectangleBorder() shape in the demo. for example, you can make the magnifier fancy using OvalBorder() object to shape and change the border’s width and color the argument.
RawMagnifier(
decoration: MagnifierDecoration(
shape: OvalBorder(
side: BorderSide(color: Colors.black, width: 3),
),
),
size: Size(Github180, 70),
magnificationScale: 1.3,
),
Constructor:
Let’s explore the constructor of the RawMagnifier.
const RawMagnifier({
super.key,
this.child,
this.decoration = const MagnifierDecoration(),
this.focalPointOffset = Offset.zero,
this.magnificationScale = 1,
required this.size,
})Properties:
> child — An optional widget to position inside the len of the RawMagnifier.
> decoration — MagnifierDecoration This magnifier’s decoration.
> focalPointOffset — The offset of the magnifier from RawMagnifier’s.
> key — Controls how one widget replaces another widget in the tree.
> magnificationScale — How “zoomed in” the magnification subject is in the lens.
> size — The size of the magnifier. This does not include added border, it only includes the size of the magnifier.
Is the Flutter widget worth the hype?
A few notable problems that it may cause to the users is of causing a disturbance in viewing. Some people may find it difficult to read this way as one has to keep moving the screen to read complete lines, from left to right. So it would ultimately be uncomfortable for some. Also, if someone tries to increase the size of the tool to cover the entire horizontal segment to make it convenient to read, it would ultimately not magnify all text of the horizontal segment.
The shape customization feature adds to the fun part when used to present it on screen, however, doesn’t add any real significance. As different viewers may generate different feedback, it’s not likely thing to say whether it would help a large section or not.
Conclusion:
In this article, we have learned about the RawMagnifier(). This magnifying glass is useful for scenarios on mobile devices where the user’s finger may be covering part of the screen where a granular action is being performed, such as navigating a small cursor with a drag gesture, on an image or text.
Github:
GitHub – RitutoshAeologic/magnifier_demo
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Reference :
RawMagnifier class – widgets library – Dart API
A common base class for magnifiers. This sample demonstrates what a magnifier is, and how it can be used. To create a…api. flutter.dev
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
