Home Blog Page 22

draw Shinchan using python turtle

By
Rajat Palankar
-
0
Draw Shinchan in Python using Turtle module

In this Python Tutorial, let’s draw Shinchan using Python Turtle.

shinchan drawing using python
shinchan drawing using python

shinchan.py

from turtle import *
#import time
s=Screen()
s.screensize(700,1000)
speed(5)
def myPosition(x, y):
    penup()
    goto(x, y)
    pendown()
#time.sleep(10)
#ht()
pensize(2)
def ankur():
    fillcolor('#ffec40')
    begin_fill()
    right(25)
    forward(20)
    right(45)
    forward(20)
    left(70)
    forward(90)
    left(95)
    forward(75)
    left(85)
    forward(175)
    left(85)
    forward(75)
    left(95)
    forward(90)
    left(85)
    forward(18)
    end_fill()

def leftLeg():
    myPosition(-39,-25)
    fillcolor("#ffd699")
    begin_fill()
    right(89)
    forward(25)
    right(90)
    forward(50)
    right(90)
    forward(20)
    right(85)
    forward(50)
    end_fill()

def leftSock():
    myPosition(-36,-78)
    fillcolor("#ffffff")
    begin_fill()
    right(90)
    circle(80,13)
    right(110)
    forward(22)
    right(85)
    forward(19)
    right(90)
    forward(21)
    end_fill()

def leftShoe():
    myPosition(-69,-112)
    fillcolor("#b5ae60")
    begin_fill()
    right(90)
    left(5)
    forward(56)
    left(105)
    forward(13)
    left(75)
    forward(20)
    right(90)
    forward(15)
    circle(10,15)
    left(80)
    forward(4)
    circle(10,15)
    left(40)
    circle(20,15)
    forward(10)
    right(45)
    forward(15)
    circle(25,25)
    end_fill()

def rightLeg():
    myPosition(60,-28)
    fillcolor("#ffd699")
    begin_fill()
    #right(90)
    left(128)
    forward(25)
    right(95)
    forward(55)
    right(90)
    forward(20)
    right(85)
    forward(55)
    end_fill()

def rightSock():
    myPosition(64,-79)
    fillcolor("#ffffff")
    begin_fill()
    right(90)
    circle(90,14)
    right(110)
    forward(23)
    right(90)
    forward(15)
    right(80)
    forward(21)
    end_fill()

def rightShoe():
    myPosition(64,-108)
    fillcolor("#b5ae60")
    begin_fill()
    right(100)
    forward(56)
    left(160)
    forward(25)
    right(68)
    forward(17)
    left(90)
    circle(18,15)
    forward(5)
    left(75)
    forward(11)
    right(85)
    forward(20)
    left(45)
    circle(10,30)
    left(25)
    forward(5)
    end_fill()

def myShirt():
    myPosition(-75,48)
    fillcolor("red")
    begin_fill()
    left(72)
    forward(185)
    left(87)
    forward(75)
    right(68)
    circle(20,8)
    circle(300,23)
    left(90)
    circle(35,17)
    right(38)
    circle(35,17)
    left(58)
    forward(75)
    right(12)
    forward(140)
    right(40)
    forward(93)
    left(120)
    circle(-20,65)
    left(75)
    forward(10)
    left(23)
    forward(88)
    #circle(-80,10)
    right(31)
    forward(87)
    right(180)
    forward(108)
    right(180)
    forward(104)
    circle(10,70)
    end_fill()

def myHead():
    myPosition(-20,295)
    left(20)
    pensize(2)
    fillcolor('#fcc6a0')
    begin_fill()
    right(90)
    forward(40)
    right(90)
    circle(50,80)
    left(10)
    circle(50,80)
    left(2)
    circle(200,50)

    left(48)
    forward(60)
    #left(20)
    circle(45,60)
    right(5)
    circle(100,85)
    end_fill()
    fillcolor('black')
    begin_fill()

    pensize(2)
    right(170)
    circle(-100,165)
    right(78)
    forward(26)
    right(87)
    forward(55)
    circle(45,60)
    right(5)
    circle(100,85)
    end_fill()

    fillcolor('#fcc6a0')
    begin_fill()
    right(180)
    circle(-100,105)
    right(37)
    forward(49)
    pensize(2)
    left(130)
    forward(30)
    #right(5)
    circle(-10,70)
    right(50)
    #circle(10,10)
    forward(36)
    right(80)
    forward(50)
    pencolor('#fcc6a0')
    right(90)
    forward(30)
    
    end_fill()

def rightHand():
    #left(35)
    myPosition(197,209)
    pencolor('black')
    fillcolor('#fcc6a0')
    begin_fill()
    right(45)
    forward(6)
    left(55)
    forward(20)
    circle(-5,70)
    right(100)
    forward(18)
    left(105)
    forward(18)
    circle(-5,70)
    right(100)
    forward(18)
    left(145)
    forward(15)
    circle(-5,70)
    right(100)
    forward(18)

    left(150)
    forward(13)
    circle(-5,70)
    right(100)
    forward(15)

    left(150)
    forward(10)
    circle(-5,70)
    right(100)
    forward(12)
    circle(60,10)
    left(45)
    forward(6)
    right(90)
    forward(10)
    end_fill()

def leftHand():
    myPosition(-94,242)
    fillcolor('#fcc6a0')
    begin_fill()
    right(10)
    forward(6)
    left(90)
    penup()
    forward(12)
    pendown()
    left(90)
    forward(8)
    left(90)
    forward(12)
    end_fill()

def myBis():
    myPosition(-103,291)
    right(90)
    fillcolor('#02d302')
    begin_fill()
    right(90)
    forward(55)
    left(80)
    forward(12)
    left(10)
    forward(17)
    left(10)
    forward(12)
    left(80)
    forward(55)
    left(80)
    forward(12)
    left(10)
    forward(17)
    left(10)
    forward(12)
    left(80)
    left(80)
    forward(12)
    left(10)
    forward(17)
    left(10)
    forward(12)
    end_fill()
    penup()
    right(100)
    forward(20)
    right(90)
    forward(14)
    pendown()
    pencolor('#9c5e4a')
    fillcolor('#9c5e4a')
    begin_fill()
    for i in range(5):
        forward(15)
        right(144)
    end_fill()
    penup()
    forward(27)
    left(90)
    forward(16)
    left(90)
    forward(7)
    pendown()
    fillcolor('#9c5e4a')
    begin_fill()
    for i in range(5):
        forward(10)
        right(144)
    end_fill()
    penup()
    forward(20)
    right(90)
    forward(5)
    pendown()
    fillcolor('#9c5e4a')
    begin_fill()
    for i in range(5):
        forward(10)
        right(144)
    end_fill()
    penup()
    right(180)
    forward(6)
    pendown()
    fillcolor('#9c5e4a')
    begin_fill()
    for i in range(5):
        forward(10)
        right(144)
    end_fill()

def leftHand2():
    myPosition(-112,284)
    pencolor('black')
    fillcolor('#fcc6a0')
    begin_fill()
    right(180)
    forward(31)
    left(90)
    for i in range(2): 
        circle(4,90) 
        #circle(4//2,45)
    for i in range(3):
        right(180)
        for i in range(2): 
            circle(4,90)
    end_fill()

def myMouth():
    myPosition(-25,200)
    left(65)
    fillcolor('#77332e')
    begin_fill()
    #circle(20)
    #forward(20)
    for i in range(2): 
        circle(25,90) 
        circle(25//2,90)
    end_fill()

def myEyebrow(x,y):
    myPosition(x,y)
    pensize(18)
    right(150)
    forward(25)
    right(90)
    for i in range(1):
        right(45)
        dot(15)
    left(55)
    forward(25)
    for i in range(1):
        right(45)
        dot(15)

def myEyelid(x,y):
    myPosition(x,y)
    pensize(2)
    left(170)
    circle(-23,180)

def myallEyes1(x,y):
    myPosition(x,y)
    right(90)
    fillcolor('#000000')
    begin_fill()
    circle(18)
    end_fill()
    left(90)
    penup()
    forward(19)
    right(90)
    forward(7)
    pendown()
    fillcolor('#ffffff')
    begin_fill()
    left(90)
    circle(9)
    end_fill()

def myallEyes2(x,y):
    myPosition(x,y)
    right(90)
    fillcolor('#000000')
    begin_fill()
    circle(18)
    end_fill()
    left(90)
    penup()
    forward(19)
    right(90)
    forward(8)
    pendown()
    fillcolor('#ffffff')
    begin_fill()
    left(90)
    circle(9)
    end_fill()

def myRobot():
    myPosition(155,-105)
    left(93)
    color('red')
    pensize(7)

    begin_fill()
    forward(50)
    left(90)
    forward(50)
    left(90)
    forward(50)
    left(90)
    forward(50)
    left(90)
    end_fill()


    color('white')
    penup()
    left(90)
    forward(30)
    right(90)
    forward(12)
    pendown()
    pensize(3)
    circle(5)
    penup()
    forward(25)
    pendown()
    circle(5)

    penup()
    right(90)
    forward(20)
    right(90)
    pendown()

    begin_fill()
    forward(23)
    right(90)
    forward(7)
    right(90)
    forward(23)
    right(90)
    forward(7)
    right(90)
    end_fill()

    penup()
    forward(25)
    right(90)
    forward(35)
    pendown()

    color('red')
    forward(30)
    penup()
    right(90)
    pendown()
    begin_fill()
    circle(5)
    end_fill()

def allLegs():
    leftLeg()
    leftSock()
    leftShoe()
    rightLeg()
    rightSock()
    rightShoe()
def allHands():
    rightHand()
    leftHand()
    myBis()
    leftHand2()
def allEyebrows():
    myEyebrow(-8,300)
    right(90)
    myEyebrow(72,300)
    myEyelid(-9,270)
    left(15)
    myEyelid(68,265)    
def allEyes():
    myallEyes1(17,275)
    myallEyes2(95,270)
ankur()
allLegs()
myShirt()
myHead()
allHands()
myMouth()
allEyebrows()
allEyes()
myRobot()
ht()
done()

Let’s draw a doraemon using python turtle – Source Code

By
Rajat Palankar
-
0
Draw Doraemon in Python using Turtle module
Draw Doraemon

In this Python Tutorial, we will learn how can we draw a doraemon in Python using Turtle module.

Draw Doraemon with Python

source code to draw doraemon using python turtle
draw doraemon in python

doraemon.py

from turtle import *

def ankle(x,y):
    penup()
    goto(x,y)
    pendown()

def eyes():
    fillcolor("#ffffff")
    begin_fill()
    tracer(False)
    a = 2.5
    for i in range(120):
        if 0 <= i <30 or 60 <= i <90:
            a -=0.05
            lt(3)
            fd(a)
        else:
            a +=0.05
            lt(3)
            fd(a)
    tracer(True)
    end_fill()

def daari():
    ankle(-32, 135)
    seth(165)
    fd(60)

    ankle(-32, 125)
    seth(180)
    fd(60)

    ankle(-32, 115)
    seth(193)
    fd(60)

    ankle(37, 135)
    seth(15)
    fd(60)

    ankle(37, 125)
    seth(0)
    fd(60)

    ankle(37, 115)
    seth(-13)
    fd(60)

def mukh():
    ankle(5, 148)
    seth(270)
    fd(100)
    seth(0)
    circle(120,50)
    seth(230)
    circle(-120,100)

def scarf():
    fillcolor('#e70010')
    begin_fill()
    seth(0)
    fd(200)
    circle(-5,90)
    fd(10)
    circle(-5,90)
    fd(207)
    circle(-5,90)
    fd(10)
    circle(-5,90)
    end_fill()

def nose():
     ankle(-10, 158)
     seth(315)
     fillcolor('#e70010')
     begin_fill()
     circle(20)
     end_fill()

def black_eyes():
    seth(0)
    ankle(-20, 195)
    fillcolor('#000000')
    begin_fill()
    circle(13)
    end_fill()

    pensize(6)
    ankle(20,205)
    seth(75)
    circle(-10,150)
    pensize(3)

    ankle(-17,200)
    seth(0)
    fillcolor('#ffffff')
    begin_fill()
    circle(5)
    end_fill()
    ankle(0,0)

def face():
    fd(183)
    lt(45)
    fillcolor('#ffffff')
    begin_fill()
    circle(120,100)
    seth(180)
    fd(121)
    pendown()
    seth(215)
    circle(120,100)
    end_fill()
    ankle(63.56,218.24)
    seth(90)
    eyes()
    seth(180)
    penup()
    fd(60)
    pendown()
    seth(90)
    eyes()
    penup()
    seth(180)
    fd(64)

def taauko():
    penup()
    circle(150,40)
    pendown()
    fillcolor("#00a0de")
    begin_fill()
    circle(150,280)
    end_fill()

def Doraemon():
    taauko()

    scarf()

    face()

    nose()

    mukh()

    daari()

    ankle(0,0)
    seth(0)
    penup()
    circle(150,50)
    pendown()
    seth(30)
    fd(40)
    seth(70)
    circle(-30,270)

    fillcolor("#00a0de")
    begin_fill()

    seth(230)
    fd(80)
    seth(90)
    circle(1000,1)
    seth(-89)
    circle(-1000,10)


    seth(180)
    fd(70)
    seth(90)
    circle(30,180)
    seth(180)
    fd(70)

    seth(100)
    circle(-1000,9)

    seth(-86)
    circle(1000,2)   
    seth(230)
    fd(40)

    circle(-30,230)
    seth(45)
    fd(81)
    seth(0)
    fd(203)
    circle(5,90)
    fd(10)
    circle(5,90)
    fd(7)
    seth(40)
    circle(150,10)
    seth(30)
    fd(40)
    end_fill()


    seth(70)
    fillcolor("#ffffff")
    begin_fill()
    circle(-30)
    end_fill()

    ankle(103.74,-182.59)
    seth(0)
    fillcolor("#ffffff")
    begin_fill()
    fd(15)
    circle(-15,180)
    fd(90)
    circle(-15,180)
    fd(10)
    end_fill()

    ankle(-96.26,-182.59)
    seth(180)
    fillcolor("#ffffff")
    begin_fill()
    fd(15)
    circle(15,180)
    fd(90)
    circle(15,180)
    fd(10)
    end_fill()

    ankle(-133.97,-91.81)
    seth(50)
    fillcolor("#ffffff")
    begin_fill()
    circle(30)
    end_fill()

    ankle(-103.42,15.09)
    seth(0)
    fd(38)
    seth(230)
    begin_fill()
    circle(90,260)
    end_fill()


    ankle(5,-40)
    seth(0)
    fd(70)
    seth(-90)
    circle(-70,180)
    seth(0)
    fd(70)

    ankle(-103.42, 15.09)
    fd(90)
    seth (70)
    fillcolor('#ffd200')
    begin_fill()
    circle(-20)
    end_fill()
    seth (170)
    fillcolor ('#ffd200')
    begin_fill()
    circle(-2, 180)
    seth (10)
    circle(-100, 22)
    circle(-2, 180)
    seth (180 - 10) 
    circle (100, 22) 
    end_fill()
    goto (-13.42, 15.09)
    seth(250)
    circle(20, 110)
    seth(90)
    fd(15)
    dot(10)
    ankle(0,-150)

    black_eyes()


if __name__ == '__main__':
    screensize(800,600,"#f0f0f0")
    pensize(3)
    speed(9)
    Doraemon()
    ankle(100,-300)
    mainloop()

Best Flutter Icons Packages

By
Rajat Palankar
-
0
flutter icons

1. line_icons

A set of Icon Library in Flutter, based on Awesome Line Icons, I love material icons and I really used it, and took a look around in searching best icon package to implement in flutter app and found this wonderful set of Icons by Icon8.

installation:

dependencies:
  line_icons:

Usage:

import 'package:line_icons/line_icons.dart';
  LineIcon.tablet()
  Icon(LineIcons.values['mobile']),

2. eva_icons_flutter

This flutter icons package provide you more then 500+ beautiful icons crafted and designed by Eva Icons which is complete Open Source to be used into your flutter application.

installation:

dependencies:
  eva_icons_flutter:

usage:

import 'package:eva_icons_flutter/eva_icons_flutter.dart';
IconButton(
      // Use the EvaIcons class for the IconData
      icon: Icon(EvaIcons.heart),
      onPressed: () { print("Eva Icon heart"); }
);

3. icons_plus

An Another Icon Package in futter that offers a convenient collection of most popular, commonly used icon while developing flutter app

installation:

dependencies:
  icons_plus: ^4.0.0

usage:

import 'package:icons_plus/icons_plus.dart';
 Icon(HeroIcons.heart),
 Icon(Iconsax.google_play),
 Icon(IonIcons.logo_android),
 Icon(LineAwesome.youtube),

4. heroicons

The HeroIcons in flutter provides you with a set of SVG icons that you can make use to show SVG icons into your flutter app, and as it is svg icon it can also be customized as per your needs. Both outlined & solid icon version are available.

installation:

dependencies:
  heroicons: ^0.8.0

usage:

import 'package:heroicons/heroicons.dart';
 HeroIcon(HeroIcons.arrowLeft, style: HeroIconStyle.solid),
 HeroIcon(HeroIcons.arrowRight, style: HeroIconStyle.solid),
 HeroIcon(HeroIcons.calendar, style: HeroIconStyle.solid),
 IconTheme(
          data: IconThemeData(
          size: 40,
          color: Colors.blue,
          ),
          child: HeroIcon(
                  HeroIcons.calendar,
                  style: HeroIconStyle.outline,
                ),
          ),

5. iconsax

Iconsax for flutter (1000+ icons 6 diferent styles, total 6000+ icons).

installation:

dependencies:
  iconsax: ^0.0.8

usage:

import 'package:iconsax/iconsax.dart';
Icon(Iconsax.volume_slash)

Unlock the Power of Machine Learning and AI with Flutter

By
Rajat Palankar
-
0
AI & ML in Flutter App
ai in flutter app

Are you looking on how to implement ML/AI into your flutter app to take it to the next level? Do you want to unlock the power of machine learning and artificial intelligence (AI) to create cutting edge applications? Then, Flutter App with ML/AL integration is easier than ever to create apps and integrate modern AI and machine learning capabilities. In this Article/blog post, We’ll explore Why flutter framework is best for building AI and ML enabled application!

What is Flutter and How Does it Work?

Flutter is a open source Application development framework, At the beginning using flutter framework developer used to only develop app for mobile devices (Android & iOS), and as flutter is cross platform development framework Now with single codebase Application developers can build application for Android, iOS, Web, Windows, Linux etc.

Flutter make used of Dart, a Programming language developed by google, that enables flutter developers to quickly write code and easily access native features.

This framework not only help developers in creating app faster, but all so provides a platform for programmer to integrate modern machine learning & artificial intelligence(AI) capabilities. It also provide a wide range of pre-build ML & AI kits, models & frameworks, That allows programmer to easily make use if then to integrate AI into flutter app.

Benefits of Using AI/ML in Flutter App Development

As you know that Flutter framework is a powerful & user-friendly platform for developing application for Android, iOS, Web with single codebase and has the ability to add cutting-edge AI and ML capabilities. Flutter makes it easier to add AI and ML-related features into the application with the intuitive and feature-rich set of APIs.

Flutter allows developers to build AI and ML-enabled applications without need to study the complex AI model, They can simply use this predefined AI model and implement the AI feature into the app just by using it API’s.

Integrating AI and ML into Your Flutter Apps

As discussed above, A Flutter is a powerful app development framework that makes it easy to integrate AI and Machine Learning (ML) in project. Flutter Official & it’s community provides a comprehensive suite of tools and libraries through which one can easily implement ML & AI in flutter.

Flutter simplifies the process of building machine learning models, developers can make use of existing technologies such as TensorFlow, Keras, and PyTorch. With these frameworks, developers can quickly and easily build models to power their applications and enable them to use AI and ML capabilities. Using AI & ML models app developer can add feature into their app using which users can do tasks like object recognition, image and video recognition, natural language processing, and more.

Exploring Flutter Libraries for AI and ML

Flutter a open source application development framework is user-friendly and developer friendly framework and thus building app with integrated AI and ML ability in it is easy in flutter. With Flutter, The developers can make use of wide range of pre-build AI libraries model in building app. These libraries has large set of helpful function and algorithms to create a powerful and efficient machine learning flutter.

Here is an Example: the TensorFlow Lite library allows developers to use TensorFlow’s powerful ML and DL in their apps. The library is specially know for training, building and deploying models, and even famous for optimizing performance and accuracy. Additionally, Their are many ML Library kits such as the Firebase ML Kit library which is mostly used for image and text recognition using mobile camera, We can build an Flutter app then capture image are recognize the text in that image.

Here is an android app example where I used Firebase ML kit for Text Recognition Using Firebase ML Kit – Text Recognition in Android.

Custom Number Stepper Input with Increment & Decrement

By
Rajat Palankar
-
0
flutter number inc desc

In this Flutter Article let’s learn how to create a custom number stepper in flutter, basically a numeric stepper input is an controller through which user can increase or decrease a number value just by clicking on plus(+) and minus (-) buttons on the screen. The current selected value or initial value will be shown between those 2 buttons.

Flutter dart doesn’t have an in-built widget to implement number stepper in app. Therefore In this article we will learn show to create a custom number stepper Input.

Number Stepper with Increment & Decrement input

NumberStepper Widget Class

Let’s Create a Widget Class that can we reusable any when in the project just by importing it.

Create a dart file under lib directory of your project and name it a numberStepper.dart

numberStepper.dart

This StatefulWidget class, accept 5 required parameter: initialValue, min, max, step, and onChanged (the callback function that passes the selected value to the parent of the NumberStepper widget):

The widget return Row Widget which have 3 children: IconButton(-), Text, IconButton(+), Basically used to Increment or Decrement the value.

import 'package:flutter/material.dart';

class NumberStepper extends  StatefulWidget {
  final int initialValue;
  final int min;
  final int max;
  final int step;

  final Function(int) onChanged;

  const NumberStepper({
    super.key,
    required this.initialValue,
    required this.min,
    required this.max,
    required this.step,
    required this.onChanged
  });

  @override
  State<NumberStepper> createState() => _NumberStepperState();
}

class _NumberStepperState extends State<NumberStepper> {
  int _currentValue = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _currentValue = widget.initialValue;
  }
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        IconButton(onPressed: (){
            setState(() {
              if(_currentValue > widget.min){
                _currentValue -= widget.step;
              }
              widget.onChanged (_currentValue);
            });
        }, icon: Icon(Icons.remove_circle,color: Colors.green,)),
        Text(
          _currentValue.toString(),
          style: TextStyle(fontSize: 30),
        ),
        IconButton(onPressed: (){
          setState(() {
            if(_currentValue < widget.max){
              _currentValue += widget.step;
            }
            widget.onChanged (_currentValue);
          });
        }, icon: Icon(Icons.add_circle,color: Colors.green)),
      ],
    );

  }
}

Using Number Stepper Widget in flutter

Now finally use make use of above Number Stepper Widget, All you need to do is import it where required, In my case I will import it in main.dart

import 'package:flutter_number_stepper/numberstepper.dart';

Syntax to use numeric stepper widget 

NumberStepper(
             initialValue: _selectedNumber,
              min: 0,
              max: 10,
              step: 2,
              onChanged: (value){
                   // your event
                 },
 ),

Complete code main.dart – Number Stepper Widget

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_number_stepper/numberstepper.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _selectedNumber = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Selected Number: ${_selectedNumber}",style: TextStyle(fontSize: 30),),
            SizedBox(height: 30,),
            ElevatedButton(onPressed: (){
                showDialog(
                    context: context,
                    builder:(_)=>AlertDialog(
                      title: Text("Select a Number"),
                      content: NumberStepper(
                        initialValue: _selectedNumber,
                        min: 0,
                        max: 10,
                        step: 2,
                        onChanged: (value){
                          setState(() {
                            _selectedNumber = value;
                          });
                        },
                      ),
                    ));
            }, child: Text("Select A Number"))
          ],
        ),
      ),
    );
  }
}
flutter number inc desc

Animated page transition in flutter

By
Keval audiya
-
0
animated page transition in flutter
page transition in flutter

Page Transitions are used in Flutter to describe the movement of objects from one position to another.

When it comes to Flutter, these elements are similar to Widgets.

What are Page Transitions in flutter?

In general, A transition is nothing but moving an object from one place to another. In flutter, it is also the same but in terms of widgets like container, button, and also pages since everything in flutter is itself a widget.

To animate our tradition between two different pages, we will use the PageRouteBuilder method. You will definitely get an impression of all the different types of transitions that are possible, and you will also be able to customize them and create your own Custom Transition.

Page Transitions can improve the aesthetics of your flutter app user. This may improve the flow between pages or the speed with which pages load. They can also be used to give video backgrounds or other assets time to load before being displayed.

To animate our transition between pages or widgets, we will use a specific transition technique.

Different Transition Styles in Flutter

In Flutter, there are various types of transitions like:

1)  Slide Transition 

2)  Fade Transition

3)  Scale Transition

4)  Size Transition

5)  Rotation Transition

So, let’s start by understanding each transition individually and writing some code lines for them.

Implementation of Page Navigation with Animation in flutter app

We will need a PageRouteBuilder to create the transition because it gives us the necessary function Object() {Constructor} in return.

We are aware of how simple it is to switch between routes in Flutter. All we have to do is push and pop using Navigator.

For push: The below code will navigate the user from one page to another.

Navigator.push(
   context,
   MaterialPageRoute(builder: (context) => SecondRoute()),
 );

For pop: The below code will remove the top most page/widget/view from the Widget tree stack

Navigator.pop(context);

We discovered that page transitions can really beautify your UI when we started experimenting with animations. Use CupertinoPageRoute if you want a slide transition similar to iOS. There is nothing more to say.

Navigator.push(
   context, CupertinoPageRoute(builder: (context) =>NextScreen()))

However, for customized transitions There are numerous transition widgets offered by Flutter. Let’s examine their potential uses.

We are aware that the two arguments for Navigator.push are BuildContext context and Route<T> route. With some transition animation, we can design our own unique page route. Start off with a straightforward slide transition.

PageRouteBuilder

A class called PageRouteBuilder extends PageRoute and creates a route that delegates control to builder callbacks.

Class PageRouteBuilder<T> Zero safety a utility class for callback-based definition of one-time page routes. The pageBuilder function, which generates the main contents of the route, must be defined by callers. Define the transitionsBuilder function to add transitions.

PageRouteBuilder properties :

  • barrierColor
  • barrierDismissible
  • maintainState
  • opaque
  • pageBuilder
  • transitionDuration
  • transitionBuilder

PageBuilder, transitionDuration, and transitionsBuilder will be used.

PageBuilder:

The routes content is created using this property.

pageBuilder: (context, animation, anotherAnimation) {
  return ReturnPage();
},

transitionDuration:

It takes time for the pages to transition between each other.

transitionDuration: Duration(milliseconds: 1000),

transitionBuilder:

The transitions themselves are constructed using this property.

transitionsBuilder:
   (context, animation, anotherAnimation, child) {
 animation = CurvedAnimation(
     curve: curveList[index], parent: animation);
 return FadeTransition(
   opacity:animation,
   child: child,
 );
}

Slide Transition: 

We will make use of the SlideTransition widgets to implement SlideTransition. A fractional translational transition is produced.

SlideTranstion’s positional property cannot be null.
It is a slightly different transition from the others because it uses Animation Offset rather than Animation Double.Therefore, Animation <Offset> is needed for this transition. Offset essentially refers to the canvas’s coordinate system. It contains both the dx and dy.

Slide Transition widget :

SlideTransition(
   position: Tween(
           begin: Offset(1.0, 0.0),
           end: Offset(0.0, 0.0))
       .animate(animation),
   child: child,
);

Fade Transition:

A fade/opacity transition is produced.We can use this transition to make any widget or image fade.
The “opacity” property is necessary .The opacity property cannot be empty.

FadeTransition(
 opacity:animation,
 child: child,
);

Scale Transition:

The scale of the widget is animated during this transition. In this, the necessary property is “scale.”Other properties include child, filterQuality, and alignment.

By altering the child’s scale, this transition brings the route to life.

On the other hand, the widget’s scaling direction is specified by the alignment property.

It is Alignment.center by default.

ScaleTransition(
 scale: animation,
 child: child,
);

Size Transition:

A size transition is produced by this transition.

The arguments for axis, sizeFactor, and axisAlignment cannot be null. By default, the axis argument is set to Axis.vertical. The child is centered along the main axis during the transition when the axisAlignment’s default value of 0.0 is used.

This transition takes into account the size of the specific widget.

Align(
 child: SizeTransition(
   sizeFactor: animation,
   child: child,
   axisAlignment: 0.0,
 ),
);

Rotation Transition:

This transition assists in animating a widget’s rotation.

It needs the “turns” property in order to be animated.

RotationTransition(
 turns: animation,
 child: child,
);

Setting up a PageRouteBuilder

pageBuilder: (context, animation, anotherAnimation) {
  return ReturnPage();
},

Navigator.of(context).push(PageRouteBuilder (
page Builder: (context, animation, anotherAnimation) {
return ReturnPage();
},
transitionDuration:Duration (milliseconds: 1000),
transitionsBuilder:
     (context, animation, anotherAnimation, child) {
animation = CurvedAnimation (
       curve: Curves.bounceIn, parent: animation);
return Rotation Transition(
     turns: animation,
     child: child,
  );
  },
),
)

Source Code for references:

In my project, I have used every possible transition. Each transition has a separate file that I’ve created. I’ve connected every file. As you can also see from the gist.

You can prefer this app code , code for click here : 

https://github.com/Mitali8620/page_transition_demo_app.git

Conclusion 

We have covered how to incorporate various transitions into our app in this blog.

I hope it will aid in your comprehension and provide you with a basic understanding of it.

Gratitude for reading

Have a Good day..!

1...212223...98Page 22 of 98