Flutter 6 months Industrial Training

 

  Creating API Keys In order to get started with Google Maps you first need to create an API key for your new project. To create an API key navigate to the Google Maps and click GET STARTED to step through the wizard to set up your API key. On the following screens you need to: Enable Google Maps API. Create a new project called Flutter Maps . Choose a billing account (don’t worry there is a free tier to use). Maps API Key wizard Once, you have successfully created your API key make sure to copy it and save it someplace, as you will need to add it into your Flutter app. Adding the Google Maps Plugin To get started using Google Maps Plugin open the pubspec.yaml file and under dev_dependencies paste the following, using the same indentation as flutter_test: : google_maps_flutter: Be sure to run Packages get after you make this change.     Adding the GoogleMap Widget Open lib ‣ places_search_map.dart and add these two member variables to _PlacesSearchMapS...

  Adding Bootstrap After creating the project, you need to install Bootstrap 4 and integrate it with your Angular project. First, navigate inside your project’s root folder: $ cd angular-bootstrap-demo Next, install Bootstrap 4 and jQuery from npm: $ npm install --save bootstrap jquery (In this case, bootstrap v4.2.1 and jquery v3.3.1 are installed.) Finally, open the angular.json file and add the file paths of Bootstrap CSS and JS files as well as jQuery to the styles and scripts arrays under the build target: "architect" : { "build" : { [ ... ] , "styles" : [ "src/styles.css" , "node_modules/bootstrap/dist/css/bootstrap.min.css" ] , "scripts" : [ "node_modules/jquery/dist/jquery.min.js" , "node_modules/bootstrap/dist/js/bootstrap.min.js" ] } , Adding A Data Service After creating a project and adding Bootstrap 4, we’...

        Firebase CRUD operations for Object Create an object binding/ Retrieve item : AngularFireObject <any> ; // db: AngularFireDatabase this . item = db . object ( 'item' ) ;   // or Observable <any> item = db . object ( 'item' ) . valueChanges ( ) ; Create // db: AngularFireDatabase const itemRef = db . object ( 'item' ) ;   // set() for destructive updates itemRef . set ( { name : 'grokonez' } ) ; Update // db: AngularFireDatabase const itemRef = db . object ( 'item' ) ; itemRef . update ( { url : 'grokonez.com' } ) ; Delete // db: AngularFireDatabase const itemRef = db . object ( 'item' ) ; itemRef . remove ( ) ; List of Objects Create a list binding/ Retrieve – Returns an Observable of data as a synchronized array of JSON objects without snapshot metadata. It is simple to render to a view: items : Observable < any [ ] > ; // db: AngularFireDatabase this . items = db . list ( 'it...

    Introduction: Angular is providing two ways to work with forms: template-driven forms and reactive forms . These both ways works differently. Below inf o rmation will help you to decide which type of form works best for your situation: Reactive forms are more robust: they’re more scalable, reusable, and testable. If forms are a key part of your application, use reactive forms. Template-driven forms are useful for adding a simple form to an app, such as an email list, signup form. They’re easy to add to an app, but they don’t scale as much as reactive forms. If you have very basic form requirements and logic, use template-driven forms. (Source courtesy: https://angular.io ) Key differences: The table below summarizes the key differences between reactive and template-driven forms.       Basic example of Reactive Forms: What are Reactive forms? At first sight Reactive forms might seem complicated but they can be very useful when you actually ge...

  What Is Angular? Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS (Wikipedia)   Although that is a nice description. It really does not tell us much. We can pick out a few things. It it TypeScript-based. That’s important. It means at some point you will need to learn TypeScript. Here is a beginner’s guide. It is open-source (free). It is for building web applications. It is a framework (unlike React which is made up of libraries). The difference? Inversion of Control   Development Step One-Installation of The Angular CLI With our tools installed, we will start our application by using the Angular Command Line Interface or CLI. This is the recommended method for starting a new project. We will need a directory on your computer to store the application. You can create this as desired but min...

  Comments

  Adding Images to Firebase Storage We can use image picker to get our images from gallery. So to add the selected images to Firebase Storage, we can create a edit icon to save the images to storage uploadPic   Widget build(BuildContext context) { Future getImage() async { var image = await ImagePicker.pickImage(source: ImageSource.gallery); setState(() { _image = image; print('Image Path $_image'); }); } Future uploadPic(BuildContext context) async{ String fileName = basename(_image.path); StorageReference firebaseStorageRef = FirebaseStorage.instance.ref().child(fileName); StorageUploadTask uploadTask = firebaseStorageRef.putFile(_image); StorageTaskSnapshot taskSnapshot=await uploadTask.onComplete; setState(() { print("Profile Picture uploaded"); Scaffold.of(context).showSnackBar(SnackBar(content: Text('Profile Picture Uploaded...

    Reading Tasks Widget _getTasks() { return StreamBuilder( stream: Firestore.instance .collection('tasks') .orderBy('timestamp', descending: true) .snapshots(), builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) { if (snapshot.hasData) { return ListView.builder( padding: const EdgeInsets.all(10.0), itemBuilder: (BuildContext context, int index) => Text(snapshot.data.documents[index]['content']), itemCount: snapshot.data.documents.length, ); } else { return Container(); } }); }   Updating & Deleting import 'dart:async'; import 'package:cloud_firestore/cloud_firestore.dart'; class Database { static final Firestore _db = Firestore.instance; static Future<void> addTask(Map<String, dynamic> task) async { aw...

  Slpash Screen => Home Screen

  Email + Password Authentication Now that the initial setup for our example app is done, we can get to some of the more exciting stuff :) Let’s start by going into the Firebase Console and selecting the Authentication page from the left navigation pane. Once you’re on the Authentication page, select the Sign-in Methods tab. This page contains each of the available sign-in methods that you can use in Firebase, so we will be returning to this page multiple times during this article. For now, select the Email/Password option and click on the Enable toggle. You will also notice a toggle for Email link (passwordless sign-in) . Go ahead and enable that toggle as well, as passwordless sign-in is the next authentication type that we will learn about. Click on the blue save button once both of those toggles are enabled. If you return to the Users tab, you’ll notice that it’s currently empty. Let’s go ahead and change that next. Email and Password Registration Return to Andro...

  Introduction F irebase is a Backend-as-a-Service — BaaS — that started as a YC11 startup and grew up into a next-generation app-development platform on Google Cloud Platform. Firebase frees developers to focus on crafting fantastic user experiences. You don’t need to manage servers. You don’t need to write APIs. Firebase is your server, your API and your datastore, all written so generically that you can modify it to suit most needs. Yeah, you’ll occasionally need to use other bits of the Google Cloud for your advanced applications. Firebase can’t be everything to everybody. But it gets pretty close. Top Features of Firebase Build apps fast, without managing infrastructure Firebase gives you functionality like analytics, databases, messaging and crash reporting so you can move quickly and focus on your users. Backed by Google, trusted by top apps Firebase is built on Google infrastructure and scales automatically, for even the largest apps. One platform, with products...