Home Blog Page 87

Flutter Google Fonts Package Library – OR use Custom Fonts in Flutter ?

0
Flutter Google Fonts Package Library
Flutter Google Fonts Package Library

Hi Guys, Welcome to Proto Coders Point In this Flutter Tutorial we  Learn How to use google Fonts package library and also implement how can we add fonts in Flutter Applications.

Firstly Let’s make use of google fonts in our Flutter project

Brief about Flutter Google Fonts package?

The use Google_Fonts package in flutter application development allows use to make use of 977 free google fonts with their variants from fonts.google.com straight into your flutter app.

NOTE : as said in official flutter dev site that this package is in Beta testing, So the API is subjected to change anytime.

Official Site

With the use of Google Fonts package, Their is not need to store .ttf or .otf files in your flutter project assets folder and map in pubspec.yaml file.

Instead, this fonts package files is been fetched once via http at the runtime, and is been stored into cached memory of the app’s file system.

Let’s begin adding this library in flutter project.

Step 1 : Create a Flutter Project

Off-course you need to create a new flutter project or just work on your existing Flutter projects

File > New > New Flutter Project

Step 2 : Add Flutter Google Fonts package Dependencies

Once you Flutter Project is ready now to need to add the required dependencies in pubspec.yaml File

dependencies:
  google_fonts: ^0.3.9 // add this line

adding google font in flutter

Then once you have add the dependencies code just click on Packages get.

Step 3 : Import the fonts Packages

Once you add the dependencies now you can user the Fonts package wherever required in your flutter project

just you need to import the fonts package dart classes.

import 'package:google_fonts/google_fonts.dart';

Step 4 : Different ways to use Google Fonts in Flutter

with Default  Fonts TextStyle

Text(
              "Welcome to Proto Coders Point",
              style: GoogleFonts.pacifico(),
            )

flutter google font pacifico example

Text(
             "Welcome to Proto Coders Point",
             style: GoogleFonts.lacquer(),
           )

flutter google font package lacquer

using existing TextStyle

Text(
              'This is Google Fonts lato',
              style: GoogleFonts.lato(
                textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
              ),

Font styling in flutter

Making use of  fontSizefontWeight, or fontStyle:

In the below snippet code i have gave styling to the text using fontSize : 25 , fontweight : 700 , fontStyle : italic.

Text(
              'This is Google Fonts',
              style: GoogleFonts.tradeWinds(
                textStyle: Theme.of(context).textTheme.display1,
                fontSize: 25,
                fontWeight: FontWeight.w700,
                fontStyle: FontStyle.italic,
              ),

flutter google fonts size, weight, style

And there you go this is how we can use Google Font in flutter app.

Part 2 : How to use Custom Fonts in Flutter  Text Widget?

Here are the steps you need to follow to use of add Custom Fonts in Flutter Project

Steps to add custom font in flutter

Step 1 : Download and add/ import font file in flutter project

To download free google fonts go to https://fonts.google.com/

Then Select the Font that you  want to use in your project and download and extract the zip file.

How to download fonts from google fonts

Extract the Zip file of Font

google fonts downloaded file image

Now, Come back to Flutter project and Create a folder name ” fonts ”  and  copy the .ttf font file under that project.

Here is my project structure after creating fonts directory

creating a fonts directory in flutter project

I am making use of Vibur-Regular.ttf font to demonstrate.

Step 2 : Declare the font in Pubspec.yaml

fonts:
  - family: Vibur_fonts  #this family name will be used in textStyle
    fonts:
      - asset: fonts/Vibur-Regular.ttf

Note : In pubspec.yaml file the indentation is very much required, Even a single space might get you an error.

Step 4 : Use it is Text Widget

Now you can use the custom fonts in Text widget in your flutter application.

Text(
              "Text with Vibur Font Style",
              style: TextStyle(fontFamily: 'Vibur_fonts', fontSize: 30),
            ),

To apply the fontFamily use the family name we have declared in pubspec.yaml.

Flutter Custom font exmple

Complete Source code to Apply Google Fonts and Custom Fonts

just Copy paste the below code in main.dart file

main.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Google Fonts in Flutter App ",
          style: GoogleFonts.lato(),
        ),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(
              "Below is Example of Google Fonts Packages",
              style: TextStyle(color: Colors.indigo, fontSize: 20),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(
              "Default TextStyle",
              style: TextStyle(decoration: TextDecoration.underline),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(
              "Welcome to Proto Coders Point",
              style: GoogleFonts.lacquer(),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text("Using existing TextStyle",
                style: TextStyle(decoration: TextDecoration.underline)),
            SizedBox(
              height: 10.0,
            ),
            Text(
              'This is Google Fonts lato',
              style: GoogleFonts.lato(
                textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(
              "Using properties size,weight,Style",
              style: TextStyle(decoration: TextDecoration.underline),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(
              'This is Google Fonts',
              style: GoogleFonts.tradeWinds(
                textStyle: Theme.of(context).textTheme.display1,
                fontSize: 25,
                fontWeight: FontWeight.w700,
                fontStyle: FontStyle.italic,
              ),
            ),
            SizedBox(
              height: 20.0,
            ),
            Text(
              "Below is Example of Custom Fonts",
              style: TextStyle(color: Colors.indigo, fontSize: 25),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(
              "Text with Vibur Font Style",
              style: TextStyle(fontFamily: 'Vibur_fonts', fontSize: 30),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter List Wheel ScrollView – A 3D ListView in a flutter with Example

0
Flutter List Wheel ScrollView - A 3D ListView in flutter with Example
Flutter List Wheel ScrollView - A 3D ListView in flutter with Example

Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we will implement Widget of the week i.e  ListWheelScrollView used to build a listview with 3d scrollView effect in flutter.

Brief about Flutter ListWheelScrollView

ListView are great but sometimes ordinary Flutter ListView are boring, Therefore Flutter Team have built a new widget of the week that is List Wheel ScrollView.

This Widget is similar to a ListView but the difference here is that the  list will be somewhat like a 3d ListView. It’s a box in which a children is on a wheel can be scrolled.

Here i main thing to understand is When the list at the zero scroll offset,the first child is aligned with the middle on the screen, and when the list is at the final scroll offset, the list child is aligned with the middle viewport.

Here the children are been rendereed as a circular rotation rather then simple scrolling on a plane.

Visit official site to learn in depth Here

So Let’s set Implementing this Flutter Listwheelscrollview widget class in our project.

Widget Class Code for above widget

ListWheelScrollView(
             controller: _controller,
             itemExtent: 80,
             diameterRatio: 2.5,
             physics: FixedExtentScrollPhysics(),
             children: <Widget>[], //list of widget Here

ListWheelScrollView have many optional properties, where 2 property of them are mandatory @required children <Widget> [ ], and itemExtent : 80 

children <Widget> [ ] : accepts list of widgets

itemExtent : Specifies the pixel Height of each Children.

diameterRatio : you can tune the diameter of the list wheel widget.

offAxixFraction : -1.5 : Here is an Example on how the 3d listview looks when offassexFraction is set to -1.5.

Flutter List Wheel Scrollview Example

You can add a magnification effect to the flutter List Wheel ScrollView

magnification : used to set the zoomed size.

useMagnifier : true or false.

Here is an example for that

Flutter 3d Listview
usemagnifier is set to true

Creating a list of Widget

List<Widget> listtiles = [
  ListTile(
    leading: Icon(Icons.portrait),
    title: Text("Portrait"),
    subtitle: Text("Beautiful View..!"),
    trailing: Icon(Icons.arrow_forward_ios),
  ),
  ListTile(
    leading: Icon(Icons.landscape),
    title: Text("LandScape"),
    subtitle: Text("Beautiful View..!"),
    trailing: Icon(Icons.remove),
  ),
  ListTile(
    leading: Icon(Icons.map),
    title: Text("Map"),
    subtitle: Text("Map View..!"),
    trailing: Icon(Icons.wb_sunny),
  ),
  ListTile(
    leading: Icon(Icons.landscape),
    title: Text("LandScape"),
    subtitle: Text("Wonderful View..!"),
    trailing: Icon(Icons.wb_sunny),
  ),
  ListTile(
    leading: Icon(Icons.list),
    title: Text("List Example"),
    subtitle: Text("List Wheel Scroll view .!"),
    trailing: Icon(Icons.cloud),
  ),
  ListTile(
    leading: Icon(Icons.settings),
    title: Text("Settings"),
    subtitle: Text("Change the setting..!"),
    trailing: Icon(Icons.portrait),
  ),
  ListTile(
    leading: Icon(Icons.event),
    title: Text("Add data"),
    subtitle: Text("Data View..!"),
    trailing: Icon(Icons.add),
  ),
  ListTile(
    leading: Icon(Icons.landscape),
    title: Text("LandScape"),
    subtitle: Text("Beautiful View..!"),
    trailing: Icon(Icons.wb_sunny),
  ),
  ListTile(
    leading: Icon(Icons.email),
    title: Text("Email"),
    subtitle: Text("Check Email..!"),
    trailing: Icon(Icons.arrow_forward),
  ),
  ListTile(
    leading: Icon(Icons.games),
    title: Text("Games"),
    subtitle: Text("Play Games..!"),
    trailing: Icon(Icons.zoom_out_map),
  ),
];

In the above snippet code i have simply created a list of ListTile widgets .

The ListTile widgets simple have  some of it’s property like leading widget, title & subtitle of the listTile and a trailing widget as an Icon widget.

Then i m just using this List of Widgets in ListWheelScrollView Widgets to show the Items as it’s children.

ListWheelScrollView(
            controller: _controller,
            itemExtent: 80,
            magnification: 1.2,
            useMagnifier: true,
            physics: FixedExtentScrollPhysics(),
            children: listtiles, // Here listtiles is the List of Widgets.
          ),

Flutter List Wheel ScrollView – A 3D ListView in a flutter with Example

Complete Source code

Once you know the Basic of the Widget, Just Copy paste the Below lines of code in main.dart file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FixedExtentScrollController _controller = FixedExtentScrollController();

  List<Widget> listtiles = [
    ListTile(
      leading: Icon(Icons.portrait),
      title: Text("Portrait"),
      subtitle: Text("Beautiful View..!"),
      trailing: Icon(Icons.arrow_forward_ios),
    ),
    ListTile(
      leading: Icon(Icons.landscape),
      title: Text("LandScape"),
      subtitle: Text("Beautiful View..!"),
      trailing: Icon(Icons.remove),
    ),
    ListTile(
      leading: Icon(Icons.map),
      title: Text("Map"),
      subtitle: Text("Map View..!"),
      trailing: Icon(Icons.wb_sunny),
    ),
    ListTile(
      leading: Icon(Icons.landscape),
      title: Text("LandScape"),
      subtitle: Text("Wonderful View..!"),
      trailing: Icon(Icons.wb_sunny),
    ),
    ListTile(
      leading: Icon(Icons.list),
      title: Text("List Example"),
      subtitle: Text("List Wheel Scroll view .!"),
      trailing: Icon(Icons.cloud),
    ),
    ListTile(
      leading: Icon(Icons.settings),
      title: Text("Settings"),
      subtitle: Text("Change the setting..!"),
      trailing: Icon(Icons.portrait),
    ),
    ListTile(
      leading: Icon(Icons.event),
      title: Text("Add data"),
      subtitle: Text("Data View..!"),
      trailing: Icon(Icons.add),
    ),
    ListTile(
      leading: Icon(Icons.landscape),
      title: Text("LandScape"),
      subtitle: Text("Beautiful View..!"),
      trailing: Icon(Icons.wb_sunny),
    ),
    ListTile(
      leading: Icon(Icons.email),
      title: Text("Email"),
      subtitle: Text("Check Email..!"),
      trailing: Icon(Icons.arrow_forward),
    ),
    ListTile(
      leading: Icon(Icons.games),
      title: Text("Games"),
      subtitle: Text("Play Games..!"),
      trailing: Icon(Icons.zoom_out_map),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ListView ScrollView Wheel"),
        ),
        body: Center(
          child: ListWheelScrollView(
            controller: _controller,
            itemExtent: 80,
            magnification: 1.2,
            useMagnifier: true,
            physics: FixedExtentScrollPhysics(),
            children: listtiles, //List of widgets
          ),
        ));
  }
}

Why Flutter Mobile App Development ? – Pros of Flutter

4
Flutter mobile app development for cross platform
Flutter mobile app development for cross platform

Hi Guys, Welcome to Proto Coders Point. In this Blog Post we will discuss on How Flutter is Useful for mobile App Development.

What is Flutter?

Flutter, a Framework developed by google is a free Cross Platform Framework that is been used to develop mobile application for android ,iOS.

In other words a Flutter is a Google UI tookkit that we can use to build a beautiful and native mobile application, web and desktop from a single codebase.

Why Flutter For Mobile App Development?

01. Open Source Platform

Flutter is an open source platform which makes it available for use and study by start-up for any given purpose. It’s more or less like an open-collaboration.

02. Custom Design and Navigation

The modern API with customizable features in flutter is a dream come true. it’s a perfect for navigation needs and does its own rendering.

03. Fast Development Cycle

When it come to Flutter, it’s a super blazing fast, it takes no more then 20 seconds for fully building an app.

04. Flutter Hot reload

Hot Reload feature of Flutter a functionality for instantaneous updates on any change in UI or Dart code, Furthermore. the Hot reload option in flutter allows developer to test the UI loading quickly.

05. Object Oriented

One of the maor problem that is solved by flutter is creating a visual user experience.Rather then using a non object oriented language, Flutter Relies on OOPS Development.

06. Super Productive

As you know that Flutter comes with best Feature that is Hot Reload Due to it’s stateFul development tools. Flutter Allows for a very fast iterative coding style.

07. Amazing Widget

Ready-made and custom widgets for fast UI coding.

Flutter Comes with wide range of ready made widget with beautiful UI. Not only it easy to use but it also provide an amazing Functionality App.

08. One code for 3 platform

Using Flutter for mobile aoo develooment the Developers can just write one codebase to develop app for more then 2 platform. This covering for android,iOS platforms.

09. Perfect for MVP (Minimum Viable Product)

Flutter is best choice for app development because you can develop a MVP product that you can show to your investors about your Ideas, Especially if you have less time.

10. Community Support & Documentation

The Flutter Community Support is bit small as commpared to react or Ionic application. But Flutter Support is growing very fast now a days.

Flutter Sensors Plugin – Accelerometer and Gyroscope sensor library

0
Flutter Sensors Plugin - Accelerometer and Gyroscope sensor library
Flutter Sensors Plugin - Accelerometer and Gyroscope sensor library

Hi Guys, Welcome to Proto Coders Point , In this Flutter Tutorial we will learn and Implement Flutter Sensor Library.

Introduction to Flutter Sensors Library

A Flutter plugin to access the accelerometer and gyroscope sensors.

Accelerometer sensor mobile x y z asis

AccelerometerEvent  : used to describe the velocity of the device, which also include the effect of gravity in the mobile device, Flutter Accelerometer simply uses accelerometer reading and tell weather the device is currently moving and if moving then in which direction it’s moving. Detail about Accelerometer wiki

UserAccelerometer Event sensor : in function reads the velocity of the device but does not read the gravity.

Gyroscope Event the Reads the Rotations of the device. Gyroscope sensor a device that is used to know the orientation ( portrait or landscape) and also the device angular velocity. Detail about Gyroscope Wiki

Now, As we know basic about those sensor in our mobile device, let’s begin implementation of Flutter Sensor Library.

Flutter Sensors Plugin – Accelerometer and Gyroscope sensors with example

Final Result of the Flutter Sensor Example

Flutter Sensor Accelerameter Gyroscope

Step 1 :  Create a new Flutter Project or open any Existing flutter project

my project Structure

Flutter Sensor Project structure
Flutter Sensor Project structure

Step 2 : Add the Sensors library in pubspec.yaml file

Get the latest version of Flutter Sensor library from official site here

dependencies:
  sensors: ^0.4.1+7   #//add this flutter sensor plugin

when you add the above sensor dependencies, the sensor packages will get added into your flutter project.

Step 3 : Importing the sensor.dart class

Then, as you have added the sensor dependencies library in your project now you can easily use the feature of sensors class just by importing sensors.dart file wherever required in your project.

import 'package:sensors/sensors.dart';

Step 4 : snippet code example

accelerometerEvents.listen((AccelerometerEvent event) {
  print(event);
});
// [AccelerometerEvent (x: 0.0, y: 9.8, z: 0.0)]

userAccelerometerEvents.listen((UserAccelerometerEvent event) {
  print(event);
});
// [UserAccelerometerEvent (x: 0.0, y: 0.0, z: 0.0)]

gyroscopeEvents.listen((GyroscopeEvent event) {
  print(event);
});
// [GyroscopeEvent (x: 0.0, y: 0.0, z: 0.0)]

Step 5 : Example using Accelerometer Sensor

In this Flutter Tutorial sensor Example i am using Accelerometer sensor to get motion data from the Sensor Device

Here is the Snippet code i have used to get the value of X asis, Y Asis , and Z Asis.

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    accelerometerEvents.listen((AccelerometerEvent event) {
      setState(() {
        x = event.x;
        y = event.y;
        z = event.z;
      });
    });
  }

Here i have override initState() method so that sensor start sending data as soon as Flutter Application starts.

As in the above lines of code accelerometerEvent returns data in a form of double. I have initialized 3 double datatype variable that holds value of X,Y,Z Asis.

Then i am using those variable to display the value in Text widget.

Text(x.toStringAsFixed(2), style: TextStyle(fontSize: 20.0)),

Here, Text widget will print only 2 digits after the decimal point.

For Example : 2.59235471 will get trimmed into 2.59

Flutter Senser data UI design

Complete Code of Flutter Accelerometer and Gyroscope sensor library

Just Copy paste the below lines of Flutter Dart code in main.dart file

main.dart

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:sensors/sensors.dart';

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double x, y, z;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    accelerometerEvents.listen((AccelerometerEvent event) {
      setState(() {
        x = event.x;
        y = event.y;
        z = event.z;
      });
    }); //get the sensor data and set then to the data types
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Sensor Library"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Text(
                  "An Example How on Flutter Sensor library is used",
                  style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w900),
                ),
              ),
              Table(
                border: TableBorder.all(
                    width: 2.0,
                    color: Colors.blueAccent,
                    style: BorderStyle.solid),
                children: [
                  TableRow(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          "X Asis : ",
                          style: TextStyle(fontSize: 20.0),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(x.toStringAsFixed(2), //trim the asis value to 2 digit after decimal point
                            style: TextStyle(fontSize: 20.0)),
                      )
                    ],
                  ),
                  TableRow(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          "Y Asis : ",
                          style: TextStyle(fontSize: 20.0),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(y.toStringAsFixed(2),  //trim the asis value to 2 digit after decimal point
                            style: TextStyle(fontSize: 20.0)),
                      )
                    ],
                  ),
                  TableRow(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          "Z Asis : ",
                          style: TextStyle(fontSize: 20.0),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0), 
                        child: Text(z.toStringAsFixed(2),   //trim the asis value to 2 digit after decimal point
                            style: TextStyle(fontSize: 20.0)),  
                      )
                    ],
                  ),
                ],
              ),
            ],
          ),
        ));
  }
}

And Here you go your Flutter app is ready to get data from device accelerometer and gyroscope sensor.

 

Flutter Dart Server Framework – Angel Server in Flutter with Example

2
Angel dart server in flutter application example
Angel dart server in flutter application example

Hi Guys, Welcome to Proto Coders Point , In this Flutter Tutorial we will implement a Dart Server Framework using Angel Server.

What is Angel Server in Dart ?

An Angel server is an Backend framework in dart language that we can user for geting or putting data from/to server. A polished, production-ready backend framework in dart.

The angel framework comes with various features such as Hot Reloading , GraphQL and ORM, Angel is one of the perfectly built backend dart to give power to build super production apps.

This server also provides supports for server-side templating, webSockets,authentication and much more.

let’s start implementing Angel dart server in our flutter project.

Flutter Dart Server Framework – Angel Server in Flutter with Example

Open the Existing Flutter project or just create a new Flutter project

Step 1 : Adding Required dependencies

Open pubspec.yaml file and add this 3 dependencies under dependencies section

angel_framework: ^2.1.1

angel_hot: ^2.0.6

dio: ^3.0.8

Brief intro to above dependencies

angel_framework : A high-powered HTTP server with support for dependency injection, sophisticated routing and more.

angel hot : Supports hot reloading of Angel servers on file changes. This is faster and more reliable than merely reactively restarting a Process.

dio : A powerful Http client for Dart, which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, Timeout etc.

angel framework dart server dependencies pubspec.yaml

Then, just click on Packages get to import all the required packages into our project.

Step 2 : Create a folder and then create a server.dart file

once you add the required dependencies, now it time to create a server.dart file where all the server side coding will be done

Right Click on project > New  > Directory ( name it )

i have created a directory with name angel_backend,

Then, in angel_backend directory create a dart file name ” server.dart “

Snippet Code from Server.dart

import 'package:angel_framework/angel_framework.dart';
import 'package:angel_hot/angel_hot.dart';

import the angel framework and angel hot package to get access to use those classes in server.dart.

Future<Angel> createServer() async {
  var app = Angel();

  app.get("/", (req, res) {
    res.write("Hi Guys, Welcome to Proto Coders Point");
  });

  return app;
}

In the above code createServer is a function which handles certain task in angel server.

app.get(“/”,(req,res) { } : is a Index route that return data in a JSON format, and Here req is request , res is response.

res.write : with send the data to the caller.

main() async {
  var hot = HotReloader(createServer, [
    "/home/rajat/AndroidStudioProjects/flutter_angel_backend/angel_backend"
  ]);

  await hot.startServer("172.20.10.5", 8383);
}

Hot Reloader class comes from Angel_hot library, it accept 2 parameters a function, and a path which need to be reloaded when changed using Flutter HotReload.

Here replace the IP address  with your wifi ip address that you are connected with, In my case its “172.20.10.5” 

Complete Code of Server.dart

server.dart

just copy paste the below lines of code in server.dart file

import 'package:angel_framework/angel_framework.dart';
import 'package:angel_hot/angel_hot.dart';

main() async {
  var hot = HotReloader(createServer, [
    "/home/rajat/AndroidStudioProjects/flutter_angel_backend/angel_backend"
  ]);

  await hot.startServer("172.20.10.5", 8383); // Replace IP Address with yours
}

Future<Angel> createServer() async {
  var app = Angel();

  app.get("/", (req, res) {
    res.write("Hi Guys, Welcome to Proto Coders Point");
  });

  return app;
}

Step 4 : How to start angel server ?

Here is how can we start the angel server

#moving to directory where server code is
/AndroidStudioProjects/flutter_angel_backend$ cd angel_backend  

#start the server
~/AndroidStudioProjects/flutter_angel_backend/angel_backend$ dart --observe server.dart


Result on Successful start the server

Observatory listening on http://127.0.0.1:8181/bE8mdqBRUY8=/

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
Your Angel server is listening at: http://172.20.10.5:8383

Once you have done coding in server side using Flutter angel server now it’s time to UI design

Step 3 : Designing Flutter UI to show Data from Angel Server

How to request angel server for data ?

Here using initState() method i have called my function to get data from server.

I have made use of Dio library to make http call to get data from server

Here the respense data will be stored in String vairable result that we can used to show data in Text Field in out flutter application.

fetchAngelData() async {
    Response response = await Dio().get("http://172.20.10.5:8383");

    setState(() {
      result = response.data;
    });
  }

 

Open main.dart file  and Copy paste below dart code

main.dart

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String result;

  String text;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    fetchAngelData();
    text = "Above Text is from Angel Server !!!!!!";
  }

  fetchAngelData() async {
    Response response = await Dio().get("http://172.20.10.5:8383"); // replace IP address with yours

    setState(() {
      result = response.data;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Angel server Example"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: Text(
              result?.toString() ?? "No Data",
              style: TextStyle(
                  fontStyle: FontStyle.italic,
                  fontWeight: FontWeight.w900,
                  fontSize: 20.0),
            ),
          ),
          Center(
            child: Text(text),
          )
        ],
      ),
    );
  }
}

Their you go now your flutter project is ready to get data from Angel Dart Server Framework.

NOTE : JUST KEEP IN MIND YOU NEED TO REPLACE THE IP ADDRESS WITH YOU IP ADDRESS YOU ARE CONNECTED WITH.

Final Result of this project example

flutter dart angel server example
flutter dart angel server example

 

How to generate qr code in python using pyqrcode library?

0
How to generate QR Code using PYQRCODE

Hey Guys, welcome to Proto Coders Point , in this Python Tutorial we will implement qr code generator using pyqrcode library.

 What is pyqrcode library/module?

The pyqrcode library is a qr code generator, By using this module we can easily develop QR code with pure python.

This Library can be used for building or creating QR codes, Then you can save the QR coder with is generated as SVG,PNG and plain text.

Let’s begin implementation of the library

Step 1 : Create New Python project or  open existing project

Off-Course you need to create a new Python Project to work on this QR code generator tutorial

File > New Project

Step 2 : Create a new Python file to handle QR code generator

You need to create a new python file where you can write python code

Right click on Project > New > Python File

i have created a new python file with name as ” QRCodeGenerator”

Creating new python file

Step 3 : Add pyqrcode library in your python project

How to install the pyqrcode module ?

installing pyqrcode in python

File > Setting > Project Interpretor > Click on ” + ” >  Search for “pyqrcode” then select the package and then click on install package button.

Step 4 : open the python file “QRCodeGenerator”

# Import QRCode from pyqrcode
import pyqrcode
from pyqrcode import QRCode

# String which represent the QR code result
s = "www.protocoderspoint.com"

# Generate QR code
url = pyqrcode.create(s)

# Create and save the png file naming "myqr.png"
url.svg("myqr.svg", scale=8)


As you have added or installed the pyqrcode module in your project now you can just import the pyqrcode library and use them in your code.

we have initialized a string “s” that holds a website address.

then pyqrcode.create(s) :  Here are we passing the string that holds url of website to create a QR Code in PYTHON

and then this url variable is passed to create a new Image of that QR Code with is been generated.

Final Result

Now just Run the project and you will see a QR Code as below image

you can just scan the QR Code and check the result will open the browser with protocoderspoint.com

Result of QR Code in python