Widget Magnifier in flutter

A widget magnifier can make an object easier to see by enlarging it, using colour filters, adding light with a flashlight or close editing and revision of an image, and adjusting the brightness or contrast of the images.

Today we will implement the widget magnifier in flutter using RawMagnifier widget which is an in-build widget provided by the flutter SDK.

Need of widget magnifier in flutter

Magnifier widget use to magnify everything on the screen or every widget shown on the screen.
Magnifying small text displayed on the maps or difficult to read point on the maps.
In web application magnify help to zoom the images for photo editing applications.
Allows for zooming the product images and product page.

You may also check our flutter app development company page.

Implementation

First of all we will create our user interface to display the content on the screen and above the content we will add magnifier widget using stack widget. So let’s start the implementation.

User Interface

Firstly create a stateful widget which contains our user interface code as shown below :-

class MagnifierWidget extends StatefulWidget {
  const MagnifierWidget({Key? key}) : super(key: key);

  @override
  State<MagnifierWidget> createState() => _MagnifierWidgetState();
}

class _MagnifierWidgetState extends State<MagnifierWidget> {
  late Offset dragGesturePosition;
  String data = "";
  double magnifyScale = 2;

  @override
  void initState() {
    super.initState();
    dragGesturePosition = const Offset(0, 0);
    data = "Lorem ipsum dolor sit amet. Et itaque dolorem ea exercitationem commodi sed nostrum repellat eos alias quaerat. Et magni officiis in odit modi et provident maxime a voluptatem voluptates et magni voluptas.";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Magnifier demo"),
        ),
        body: GestureDetector(
          onPanUpdate: (DragUpdateDetails details) => setState(
            () {
              dragGesturePosition = details.localPosition;
            },
          ),
        ),
    );
  }
}

class MagnifierWidget extends StatefulWidget {

const MagnifierWidget({Key? key}) : super(key: key);

@override

State<MagnifierWidget> createState() => _MagnifierWidgetState();

}

class _MagnifierWidgetState extends State<MagnifierWidget> {

late Offset dragGesturePosition;

String data = "";

double magnifyScale = 2;

@override

void initState() {

super.initState();

dragGesturePosition = const Offset(0, 0);

data = "Lorem ipsum dolor sit amet. Et itaque dolorem ea exercitationem commodi sed nostrum repellat eos alias quaerat. Et magni officiis in odit modi et provident maxime a voluptatem voluptates et magni voluptas.";

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text("Magnifier demo"),

body: GestureDetector(

onPanUpdate: (DragUpdateDetails details) => setState(

() {

dragGesturePosition = details.localPosition;

);

}

User interface contains the simple Gesture detector in body which detect the drag gesture and update the variable dragGesturePosition.

dragGesturePosition :- It contains the position of the magnifier widget, initially is set to top left Offset(0, 0).

magnifyScale :- defines the how much zoomed the widgets on the screen, initially set to 2.

data :- String variable contains Text to display on the screen.

Want to learn about Draggable widget in flutter.

Design part

Add the following code as child of gesture detector widget, SizedBox use to define height and width for the content.

SizedBox(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Stack(children: [
              Column(
                children: [
                  Container(
                    margin: const EdgeInsets.all(10.0),
                    padding: const EdgeInsets.symmetric(
                        vertical: 10.0, horizontal: 15),
                    child: Text(
                      data + data,
                    ),
                  ),
                  const CircleAvatar(
                      radius: 150,
                      backgroundImage: AssetImage(
                        "assets/images/flowerImage.jpg",
                      )),
                ],
              ),
              Positioned(
                left: dragGesturePosition.dx,
                top: dragGesturePosition.dy,
                child: RawMagnifier(
                  decoration: MagnifierDecoration(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(200),
                      side: const BorderSide(color: Colors.black, width: 3),
                    ),
                  ),
                  size: const Size(200, 80),
                  magnificationScale: magnifyScale,
                ),
              ),
            ]),
          )

SizedBox(

height: MediaQuery.of(context).size.height,

width: MediaQuery.of(context).size.width,

child: Stack(children: [

Column(

children: [

Container(

margin: const EdgeInsets.all(10.0),

padding: const EdgeInsets.symmetric(

vertical: 10.0, horizontal: 15),

child: Text(

data + data,

const CircleAvatar(

radius: 150,

backgroundImage: AssetImage(

"assets/images/flowerImage.jpg",

)),

Positioned(

left: dragGesturePosition.dx,

top: dragGesturePosition.dy,

child: RawMagnifier(

decoration: MagnifierDecoration(

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(200),

side: const BorderSide(color: Colors.black, width: 3),

size: const Size(200, 80),

magnificationScale: magnifyScale,

]),

)

We have used simple text and a asset image to display on the user interface.

In designing part we have used Stack widget to show the magnifier on top of the text and image widget.

RawMagnifier :- displayed top of the widgets on the UI.

Positioned widget :- update the position of magnify widget when the user drag it on the screen and move to the particular position.

size :- defines the size of the magnifier widget (width and height).

decoration :- we can provide the customization to the magnifier widget using the MagnifierDecoration class. By this we can add borders, changes the colour and shape, and update the opacity of the magnification.

Use Stack in flutter

User interface Output

Widget Magnifier User Interface

RawMagnifier class

RawMagnifier(
                  decoration: MagnifierDecoration(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(200),
                      side: const BorderSide(color: Colors.black, width: 3),
                    ),
                  ),
                  size: const Size(200, 80),
                  magnificationScale: magnifyScale,
                ),

RawMagnifier(

decoration: MagnifierDecoration(

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(200),

side: const BorderSide(color: Colors.black, width: 3),

size: const Size(200, 80),

magnificationScale: magnifyScale,

Properties of RawMagnifier class :

child :- optional widget to place inside the lens of the RawMagnifier.

decoration :- provide decoration to the magnifier.

magnificationScale :- How “zoomed in” the magnification subject is in the lens.

size :- The size of the magnifier.

Full source code

Below is the full source code for the implementation.

class MagnifierWidget extends StatefulWidget {
  const MagnifierWidget({Key? key}) : super(key: key);

  @override
  State<MagnifierWidget> createState() => _MagnifierWidgetState();
}

class _MagnifierWidgetState extends State<MagnifierWidget> {
  late Offset dragGesturePosition;
  String data = "";
  double magnifyScale = 2;

  @override
  void initState() {
    super.initState();
    dragGesturePosition = const Offset(0, 0);
    data =
        "Lorem ipsum dolor sit amet. Et itaque dolorem ea exercitationem commodi sed nostrum repellat eos alias quaerat. Et magni officiis in odit modi et provident maxime a voluptatem voluptates et magni voluptas.";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Magnifier demo"),
        ),
        body: GestureDetector(
          onPanUpdate: (DragUpdateDetails details) => setState(
            () {
              dragGesturePosition = details.localPosition;
            },
          ),
          child: SizedBox(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Stack(children: [
              Column(
                children: [
                  Container(
                    margin: const EdgeInsets.all(10.0),
                    padding: const EdgeInsets.symmetric(
                        vertical: 10.0, horizontal: 15),
                    child: Text(
                      data + data,
                    ),
                  ),
                  const CircleAvatar(
                      radius: 150,
                      backgroundImage: AssetImage(
                        "assets/images/flowerImage.jpg",
                      )),
                ],
              ),
              Positioned(
                left: dragGesturePosition.dx,
                top: dragGesturePosition.dy,
                child: RawMagnifier(
                  decoration: MagnifierDecoration(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(200),
                      side: const BorderSide(color: Colors.black, width: 3),
                    ),
                  ),
                  size: const Size(200, 80),
                  magnificationScale: magnifyScale,
                ),
              ),
            ]),
          ),
        ),
        floatingActionButton: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            InkWell(
              child: Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.deepPurple.shade300),
                  child: const Icon(
                    Icons.add,
                    size: 40,
                  )),
              onTap: () {
                setState(() {
                  magnifyScale++;
                });
              },
            ),
            InkWell(
              child: Container(
                  margin: EdgeInsets.only(top: 6),
                  padding: EdgeInsets.all(8),
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.deepPurple.shade300),
                  child: Icon(
                    Icons.remove,
                    size: 40,
                  )),
              onTap: () {
                if (magnifyScale > 1) {
                  setState(() {
                    magnifyScale--;
                  });
                }
              },
            )
          ],
        ));
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

class MagnifierWidget extends StatefulWidget {

const MagnifierWidget({Key? key}) : super(key: key);

@override

State<MagnifierWidget> createState() => _MagnifierWidgetState();

}

class _MagnifierWidgetState extends State<MagnifierWidget> {

late Offset dragGesturePosition;

String data = "";

double magnifyScale = 2;

@override

void initState() {

super.initState();

dragGesturePosition = const Offset(0, 0);

data =

"Lorem ipsum dolor sit amet. Et itaque dolorem ea exercitationem commodi sed nostrum repellat eos alias quaerat. Et magni officiis in odit modi et provident maxime a voluptatem voluptates et magni voluptas.";

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text("Magnifier demo"),

body: GestureDetector(

onPanUpdate: (DragUpdateDetails details) => setState(

() {

dragGesturePosition = details.localPosition;

child: SizedBox(

height: MediaQuery.of(context).size.height,

width: MediaQuery.of(context).size.width,

child: Stack(children: [

Column(

children: [

Container(

margin: const EdgeInsets.all(10.0),

padding: const EdgeInsets.symmetric(

vertical: 10.0, horizontal: 15),

child: Text(

data + data,

const CircleAvatar(

radius: 150,

backgroundImage: AssetImage(

"assets/images/flowerImage.jpg",

)),

Positioned(

left: dragGesturePosition.dx,

top: dragGesturePosition.dy,

child: RawMagnifier(

decoration: MagnifierDecoration(

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(200),

side: const BorderSide(color: Colors.black, width: 3),

size: const Size(200, 80),

magnificationScale: magnifyScale,

]),

floatingActionButton: Column(

mainAxisSize: MainAxisSize.min,

children: [

InkWell(

child: Container(

padding: const EdgeInsets.all(8),

decoration: BoxDecoration(

shape: BoxShape.circle,

color: Colors.deepPurple.shade300),

child: const Icon(

Icons.add,

size: 40,

)),

onTap: () {

setState(() {

magnifyScale++;

});

InkWell(

child: Container(

margin: EdgeInsets.only(top: 6),

padding: EdgeInsets.all(8),

decoration: BoxDecoration(

shape: BoxShape.circle,

color: Colors.deepPurple.shade300),

child: Icon(

Icons.remove,

size: 40,

)),

onTap: () {

if (magnifyScale > 1) {

setState(() {

magnifyScale--;

});

}

)

));

}

floatingActionButton :- we have added two button to increase and decrease the magnifyScale property of the widget.

Learn more about gestures in flutter

Output of the Source code