DEV Community: Shivam Goyal

What's new with Flutter 1.7 & how to upgrade to the latest version

Shivam Goyal — Wed, 25 Mar 2020 22:51:18 +0000

Flutter has got a new & improved version of itself in it’s July release. The release is available now in the stable channel for users to upgrade. Flutter 1.7 contains support for AndroidX and for updated Play Store requirements, a number of new and enhanced components, and bug fixes to customer-reported issues.

Upgrading to Flutter 1.7

If you already have Flutter on your system and you’re on the default stable channel, you can upgrade to version 1.7 by running flutter upgrade from the command line.

If you want to freshly install Flutter on your system then you can find it here.

New Features & Upgrades

New widgets and framework enhancements

Range Slider
This release features a new RangeSlider control that lets you select a range of values on a single slider (for example a minimum and maximum temperature value):

The new, themeable RangeSlider widget supports continuous or discrete styles

Snackbar
The updated SnackBar widget supports an updated look in the Material spec, and a number of new samples are added to the documentation.
Cupertino
The fidelity of the CupertinoPicker and CupertinoDateTimePicker widgets are updated and added support for localization to non-English languages.
Text Selection & Editing
Flutter devs have made major improvements to the text selection and editing experience on iOS, regardless of whether you’re using the Material or Cupertino design language.
Text Rendring
Text rendering gets a big upgrade with support for rich typography features, including tabular and old-style numbers, slashed zeros, and stylistic sets, as this demo shows:

With Flutter, you can now add sophisticated typography with OpenType font feature support

Game Controllers
Flutter now has built-in support for gaming controllers and you can build those feature natively.

AndroidX Support for New Apps

AndroidX is a new open-source support library from the Jetpack team that helps Android apps stay updated with the latest components without sacrificing backward compatibility. Now that AndroidX is itself stable and many Flutter packages have been updated to support it, Flutter supports creating new Flutter projects with AndroidX, which reduces the work needed to integrate with other parts of the Android ecosystem.

When creating a Flutter project, you can add the --androidx flag to ensure the generated project targets the new support library. Information about migrating existing projects to AndroidX can be found on flutter.dev. We’re actively working on bringing AndroidX / Jetifier support for apps with mixed AndroidX / Android Support libraries, such as in add-to-app cases, and will have more to share on this front in a forthcoming post.

Support for Android app bundles and 64-bit Android apps

From August 1st, 2019, Android apps that use native code and target Android 9 Pie will be required to provide a 64-bit version in addition to the 32-bit version when publishing to the Google Play Store. While Flutter has long supported generating 64-bit Android apps, version 1.7 adds support for creating Android App Bundles that target both 64-bit and 32-bit from a single submission. The particular steps for how to create separate APK files for both 32-bit and 64-bit devices are provided in a separate blog post.

Building apps on Xcode becomes easy

Flutter has particular added support for the new Xcode build system in Flutter 1.7 release, so as to make the development of Flutter apps easy & comfortable on Mac. The support can be easily enabled for existing projects in minimum clicks.

Over 1250 issues closed on Github

Flutter responded to customer-reported issues, with over 1,250 issues closed in the two months since their last stable release in May.

With the rapid growth in Flutter is working to increase staffing in this area, which will help with faster triaging of new bugs, closing and merging duplicate issues and redirecting support requests to StackOverflow.

Flutter team has also fixed the top crashing bug, which was an error when the Flutter tool is unable to write to the Flutter directory. Flutter now fails gracefully if the user doesn’t have write permissions, with clearer indications on how to fix the problem.

Updated Documentation & Samples

In terms of documentation, Flutter has an ever-increasing list of samples that can be created directly from the flutter create tool. From the command line, you can run a command such as:

$ flutter create --sample=material.AppBar.1 mysample

If a sample can be created in this way, you’ll see a “Sample in the App” tab in the documentation of that particular widget.

Behind the scenes, you’ll see lots of underlying work to create infrastructure towards enabling Flutter on macOS and Windows, with further support for important concepts like right-clicking and unique platform infrastructure such as MSBuild. Support for non-mobile platforms is not yet available in the stable channel, however.

🎯 That’s all for today.

If you got any queries hit me up in the comments or ping me over on hi@itsshivam.com 📧

If you learned even a thing or two, clap your hands👏 as many times as you can to show your support! It really motivates me to contribute towards the community.

Feeling too generous? Buy me a Drink 🍺

Wanna collaborate? Let’s talk some tech 😊

Stalk me over on itsshivam.com, GitHub, or LinkedIn. 👀

This article was originally published at Enappd.

Connecting Cloud Firestore Database to Flutter

Shivam Goyal — Wed, 25 Mar 2020 21:53:56 +0000

Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in-sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity. Cloud Firestore also offers seamless integration with other Firebase and Google Cloud Platform products, including Cloud Functions.

What you’ll build?

In this tutorial, you’ll build a mobile app featuring realtime Cloud Firestore Database using the Flutter SDK. Your app will:

Display a voting interface connected to a Firestore database.
Update the database on the cloud as you tap on a particular vote.

That’s how the final implementation gonna look like

This tutorial focuses on adding Cloud Firestore to a Flutter app. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.

Package Used | cloud_firestore

Setting up Flutter on your machine

The detailed steps to install Flutter on your personal computer & getting started with Flutter is available at the following blog post here.

Adding Firebase to your Flutter App

This tutorial requires already setup Firebase. The detailed steps to integrate Firebase with Flutter is available at the following blog post here.

Your Firebase-Flutter setup is finished, and you’re ready to start building your app!

Create your Cloud Firestore database

You’ll start by setting up Cloud Firestore and initializing it with some values.

Open the Firebase console, then select the Firebase project that you created during setup.
From the left nav Develop section, select Database.

In the Cloud Firestore pane, click Create database.

In the Secure rules for Cloud Firestore dialog, select Start in test mode, then click Next. On the next screen, select Cloud Firestore location. I suggest selecting nam5 (us-central) . However, you can select according to your preference.
Test mode allows any user to read and write to your database, which is convenient during development. However, this can be a security risk. Before releasing an app to production, you should add security rules.

Our database will have one collection, that we’ll name “candidate”. In the collection is where the names and votes are stored. Click Start Collection, set the collection’s ID to candidate, then click Next.

You can now add documents to your collection. Each document has a Document ID, and we’ll need to have name and votes fields.
Enter a candidate name using all lowercase letters. In this example, we used tom.Using an actual candidate name for each Document ID ensures that the documents are displayed alphabetically by candidate name. By default, Document IDs are auto-generated timestamps, and documents are displayed in the order that they were created.

For the existing Field, enter the value of name, select string for the Type, then enter the Value of Tom.
Click the Add Field icon to add a second field to contain the number of votes. Select number for the Type, then initialize the Value as 0.
Click Save.
Add additional baby names by clicking Add Document.After adding several documents to your collection, your database should look something like this:

Firestore Console

Coding the application

Add Cloud Firestore plugin to your app

From the root directory of your Flutter app, open your pubspec.yaml file.
Add the FlutterFire plugin for the Cloud Firestore. All Flutter apps with Cloud Firestore, both iOS and Android versions, require the cloud_firestore plugin.

Run flutter packages get.

Adding the User Interface

Using your IDE or editor, open lib/main.dart. This file currently contains the entire code for the default Flutter app.
Delete all of the code in main.dart, then replace it with the following:

Save the file, then hot-reload your app. You should see the following app:

Mock created with dummyData

The app is currently just a mock. Clicking on names only prints to the console. The next step is to connect this app to Cloud Firestore. Before doing that, you can read about how the code in main.dart is structured.

The first half of this program is fairly straightforward:

You imported cloud_firestore.dart, a plugin for communicating with the Cloud Firestore.
You added some dummy data (soon to be replaced by a Cloud Firestore instance).
You set the app’s title to Voting Panel.

The interesting part of the code is in _MyHomePageState. The build method in this block defines the widget hierarchy that Flutter uses to create the display for your app.

The app has an AppBar (with a title of Voting Panel).
The app’s body contains a ListView, which renders each of the dummy data points as individual list items.

The longest method by far is _buildListItem, which tells Flutter how to build each item in the list (displayed as the rounded rectangles with candidate names and the number of votes).

Lastly, you have Record, the convenience class that holds a single record for a name. You don't strictly need this class for a simple app like this to function, but it makes the code a bit cleaner.

Connect your Flutter app to Cloud Firestore

Our app is now connected to Cloud Firestore! It’s time to fetch our collection (candidate) and use it instead of our dummySnapshot object.

From Dart, you get the reference to Cloud Firestore by calling Firestore.instance. Specifically for our collection of baby names, call Firestore.instance.collection('candidate').snapshots() to return a stream of snapshots.

Let’s plug that stream of data into our Flutter UI using a StreamBuilder widget.

In your IDE or editor, open lib/main.dart, then find the _buildBody method.
Replace the entire method with the following code:

The code that you just copy-pasted has a type error. It’s trying to pass a list of DocumentSnapshot to a method that expects something else. Find _buildList and change its signature to this:

Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
  ...

Instead of a list of Map, it now takes a list of DocumentSnapshot.
We’re almost there. The method _buildListItem still thinks it's getting a Map. Find the start of the method, then replace it with this:

Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
 final record = Record.fromSnapshot(data);

Instead of a Map, you're now taking a DocumentSnapshot, and using the Record.fromSnapshot() named constructor to build the Record. Remove the dummySnapshot field from the top of lib/main.dart. It's not needed anymore.
Save the file, then hot-reload your app. After about a second, your app should look like this:

Reading from the Cloud Firestore database

You’ve just read from the database that you created! If you want, you can go to the Firebase console and change the database. Your app will reflect the changes almost immediately (after all Cloud Firestore is a real-time database!).

Add interactivity

Next, you will allow users to actually vote!

In lib/main.dart, find the line that says onTap: () => print(record). Change it to this:

onTap: () => record.reference.updateData({'votes': record.votes+1})

Instead of just printing the record to the console, this new line updates the baby name’s database reference by incrementing the vote count by one.

Save the file, then hot-reload your app.

Voting is now functional, including the update to the user interface.

How does this work?
When the user taps the tile containing a name, you are telling Cloud Firestore to update the data of that reference. In turn, this causes Cloud Firestore to notify all listeners with the updated snapshot. As your app is listening through the StreamBuilder implemented above, it's updated with the new data.

Here are the final contents of lib/main.dart.

Building & running the application

Connect your Emulator or physical Android device to test the application.
Click on Build & Run.
And Boooom 🔥, your app is ready.The final build would look like the below illustration.

That’s how the Final Implementation will look like

🎯 That’s all for today.

If you got any queries hit me up in the comments or ping me over on hi@itsshivam.com 📧

If you learned even a thing or two, clap your hands👏 as many times as you can to show your support! It really motivates me to contribute towards the community.

Feeling too generous? Buy me a Drink 🍺

Wanna collaborate? Let’s talk some tech 😊

Stalk me over on itsshivam.com, GitHub, or LinkedIn. 👀

This article was originally published at Enappd.

Building an iOS-style Shopping App with a minimalist design using Flutter

Shivam Goyal — Wed, 25 Mar 2020 21:30:59 +0000

The Material Design language was created for any platform, not just Android. When you write a Material app in Flutter, it has the Material look and feels on all devices, even iOS. If you want your app to look like a standard iOS-styled app, then you would use the Cupertino library.

You can technically run a Cupertino app on either Android or iOS, but (due to licensing issues) Cupertino won’t have the correct fonts on Android. For this reason, use an iOS-specific device when writing a Cupertino app.

What you’ll build?

In this tutorial, you’ll build a shopping app with an iOS materialistic design using the Flutter SDK. Your app will have:

Three tabs for Products, Search and Cart.
Holistic flow for buying any product.
Use the provider package to manage state between screens.

This tutorial focuses on building important components and Cupertino layout. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.

Github Repository | @ShivamGoyal1899

Package Used | provider

Setting up Flutter on your machine

The detailed steps to install Flutter on your personal computer & getting started with Flutter is available at the following blog post here.

Coding the application

Create the initial Cupertino app

Create a simple templated Flutter app, using the instructions in the above blog. Name the project cupertino_store. You’ll be modifying this starter app to create the finished app.
Replace the contents of main.dart with the following code.

Add a file to the lib directory called styles.dart. The Styles class defines the text and color styling to customize the app.

Add the following CupertinoStoreApp class to lib/app.dart.

Add the following CupertinoStoreHomePage class to lib/app.dart to create the layout for the homepage.

At the top of the project, edit the pubspec.yaml file. Add the libraries that you will need, and a list of the image assets.

Create the structure for a 3-tab app

BottomAppBar

The final app features 3 tabs:Product list | Product search | Shopping cart
Replace the CupertinoStoreHomePage class with the following, which sets up a 3-tab scaffold:

Create a lib/product_list_tab.dart file for the first tab that compiles cleanly, but only displays a white screen. Use the following content:

Create a lib/search_tab.dart file that compiles cleanly, but only displays a white screen. Use the following content:

Create a lib/shopping_cart_tab.dart file that compiles cleanly, but only displays a white screen. Use the following content:

Update the import statements in lib/app.dart to pull in the new tab widgets:

Add state management

Create a model directory under lib. Add a lib/model/product.dart file that defines the product data coming from the data source:

Create a lib/model/products_repository.dart file. This file contains all products for sale. Each product belongs to a category.

Here is the list of method signatures provided by this class.

In the main()method, initialize the model. Add the lines marked with NEW.

List products for sale

Create the lib/product_row_item.dart file, with the following content:

In lib/product_list_tab.dart, import the product_row_item.dart file.

import 'package:flutter/cupertino.dart';
import 'package:provider/provider.dart';
import 'model/app_state_model.dart';
import 'product_row_item.dart';      // add this line

In the build() method for ProductRowTab, get the product list and the number of products. Add the new lines indicated below:

Also in the build() method, add a new sliver to the sliver widgets list to hold the product list. Add the new lines indicated below:

Add product search

Update the imports in lib/search_tab.dart. Add imports for the classes that the search tab will use:

Update the build() method in _SearchTabState. Initialize the model and replace the CustomScrollView with individual components for searching and listing.

Add supporting variables, functions, and methods to the _SearchTabState class. These include initState(), dispose(), _onTextChanged(), and _buildSearchBox(), as shown below:

Create a new file, lib/search_bar.dart. The SearchBar class handles the actual search on the product list. Seed the file with the following content:

Add customer info

Update the lib/shopping_cart_tab.dart file. Add private methods for building the name, email, and location fields. Then add a _buildSliverChildBuildDelegate() method that builds out parts of the user interface.

Update the build() method in the _SearchTabState class. Add a SliverSafeArea that calls the _buildSliverChildBuildingDelegate method:

Add date picker

Add imports and a const to lib/shopping_cart_tab.dart. Add the new lines, as shown:

Add a _buildDateAndTimePicker() function to the _ShoppingCartTab widget. Add the function, as follows:

Add a call to build the date and time UI, to the _buildSliverChildBuilderDelegate function. Add the new code, as shown:

Add selected items for purchase

Import the product package in shopping_cart_tab.dart.

import 'model/product.dart';

Add a currency format to the _ShoppingCartTabState class.

final _currencyFormat = NumberFormat.currency(symbol: '\$');

Add a product index to the _buildSliverChildBuilderDelegate function.

SliverChildBuilderDelegate _buildSliverChildBuilderDelegate(
   AppStateModel model) {
 return SliverChildBuilderDelegate(
   (context, index) {
     final productIndex = index - 4;    // NEW
     switch (index) {]
  // ...

In the same function, display the items to purchase. Add the code to the default: section of the switch statement, as follows:

Building & running the application

Connect your Emulator or physical Android device to test the application.
Click on Build & Run.
And Boooom 🔥, your app is ready.The final build would look like the below illustration.

🎯 That’s all for today.

If you got any queries hit me up in the comments or ping me over on hi@itsshivam.com 📧

If you learned even a thing or two, clap your hands👏 as many times as you can to show your support! It really motivates me to contribute towards the community.

Feeling too generous? Buy me a Drink 🍺

Wanna collaborate? Let’s talk some tech 😊

Stalk me over on itsshivam.com, GitHub, or LinkedIn. 👀

Building a Flutter DateTime Picker in just 15 minutes

Shivam Goyal — Wed, 25 Mar 2020 05:14:00 +0000

With the Flutter DateTime Picker plugin, you can add date & time pickers to your native application. The plugin’s interface is inspired by the iOS Cupertino style menu.

What you’ll build?

In this tutorial, you’ll build a mobile app featuring a DateTime Picker using the Flutter SDK. Your app will:

Display separate Date & Time Pickers with a minimalistic interface
Display the selected data as outputs to console

That’s how our DateTime Picker gonna look

This tutorial focuses on adding a DateTime Picker to a Flutter app. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.

Github Repository | @ShivamGoyal1899

ShivamGoyal1899/DateTimePicker
With the Flutter DateTime Picker plugin, you can add date & time pickers to your native application. The plugin's…github.com

Package Used | flutter_datetime_picker

flutter_datetime_picker | Flutter Package
(Pub) flutter_datetime_picker A flutter date time picker inspired by flutter-cupertino-date-picker you can choose date…pub.dev

Setting up Flutter on your machine

The detailed steps to install Flutter on your personal computer & getting started with Flutter is available at the following blog

How to install Flutter on Mac & Windows
Learn about Flutter and how to set it up on Windows and Mac systemsmedium.com

Coding the component

Component Syntax

The basic format of a DateTime Picker looks like the one below:

Adding DateTime Picker plugin as a dependency

Adding additional capability to a Flutter app is easy using Pub packages. In this tutorial, you introduce the DateTime Picker plugin by adding a single line to the pubspec.yaml file.

Importing plugin to main.dart file

Import flutter_datetime_picker dependency to your main.dart file by adding the following line at the starting of the file:

Putting Code in action

Amend your main.dart file as per the following code:

Building & running the application

Connect your Emulator or physical Android device to test the application.
Click on Build & Run.
And Boooom, your app is ready.The final build would look like the below illustration.

The final output of the implementation

Customization Options

There are three functional variations of the plugin available as follows:

Solo DatePicker
Solo TimePicker
Dual DateTimePicker

Language Options

There are various language options available to implement the plugin for international use. For changing the language of the component amend the following with preferred LocaleType.

locale: LocaleType.en

English(en)
Persian(fa)
Chinese(zh)
Dutch(nl)
Russian(ru)
Italian(it)
French(fr)
Spanish(es)
Polish (pl)
Portuguese(pt)
Korean(ko)
Arabic(ar)
Turkish(tr)
Japanese(jp)
German(de)
Danish(da)
Bengali(bn)
Vietnamese(vi)
Armenian(hy)

Further Customisations

If you want to customize your own style of date time picker, there is a class called CommonPickerModel, every type of date time picker is extended from this class, you can refer to other picker models (eg. DatePickerModel), and write your custom one, then pass this model to showPicker method, so that your own date time picker will appear, it’s easy, and will perfectly meet your demand.

How to customize your own picker model:

🔍 Read more of my Articles

Adding Firebase to your Flutter App
Learn how to easily integrate Firebase in Flutter with a step by step guide.medium.com How to add Facebook Authentication to your Flutter App
Learn how to add Facebook OAuth to your Flutter App with easy step by step guidemedium.com Building a Flutter AlertDialog in just 15 minutes
Learn how to implement a customized Alert Dialog / Popup in Flutter.medium.com

🎯 That’s all for today.

If you got any queries hit me up in the comments or ping me over on hi@itsshivam.com 📧

If you learned even a thing or two, clap your hands👏 as many times as you can to show your support! It really motivates me to contribute towards the community.

Feeling too generous? Buy me a Drink 🍺

Wanna collaborate? Let’s talk some tech 😊

Stalk me over on itsshivam.com, GitHub, or LinkedIn. 👀

Enappd | Ionic, React Native, Firebase themes, templates and starters
Get full source code for Ionic, React Native, Firebase mobile app templates and starters. Use free templates and…store.enappd.com

Understanding Version Control Systems: GitHub Simplified with SourceTree

Shivam Goyal — Fri, 27 Sep 2019 14:21:37 +0000

What is a Version Control System?

Version control systems are a category of software tools that help a software team manage changes to source code over time. Version control software keeps track of every modification to the code in a special kind of database. If a mistake is made, developers can turn back the clock and compare earlier versions of the code to help fix the mistake while minimizing disruption to all team members.

In simple words, Version Control enables your code to live long by logging the state continuously, in an easily accessible format.

Do we developers really need VCS?

Having a VCS linked to your project is not a mandatory feature, but surely is a recommended one.

Having a VCS makes it easy to track 'who developed what' when the project is being developed on multiple devices simultaneously, by multiple developers.

While it is possible to develop software without using any version control, doing so subjects the project to a huge risk that no professional team would be advised to accept. So the question is not whether to use version control but which version control system to use.

Which Version Control is best for you?

There are plenty of choices available in the market including:

Git
Mercurial
SVN
CVS

The industry’s most used VCS is Git and hence is the most recommended one. Here, we will only be talking about Git.

Pros & Cons of Git Version Control

Pros of using Git

It’s exactly why to pick Git over others.

Distributed fault-tolerant network architecture
Optimized for fast commits and checkouts
Non-destructive updates through the use of an immutable log

Cons of using Git

Nothing is perfect, hence is Git.

Weak support for large binary files
Very large repositories with extensive history can slow down interactions
Learning curve and un-intuitive commands

Setting up Git

Now, it’s time to set up Git on your system.

There are plenty of ways to start with, but we will be using a VCS client called SourceTree as it’s the most prevailing VCS client in the tech industry.

Reasons for choosing SourceTree

There are five major reasons for choosing SourceTree over Command-Line or any other Git client.

Branch management
Managing branches in Sourcetree is easy. It enables you to switch working copies with a single click. It also tells you how far ahead or behind you are to the version in the repository, and alerts you to push or pull. Know where you are with visual branch management.
Working Copy
Using the command line can sometimes feel like you are working in the dark. The ‘Working Copy’ section shows the difference between your local copy and the version in the Git repository. This gives you a ‘real-time’ view of your local files, so you can see exactly what you have changed.
Branch History
A huge part of the SourceTree interface is History. This section displays the full history of the current branch. Each commit and file change is displayed and accessible, providing a very powerful tool for version control. This alone is a huge benefit for projects which are worked on regularly by multiple developers.
GitFlow
One feature I make use of is GitFlow. Having 6+ developers working on one set of code at once can get complicated. GitFlow adds a structured process to your workflow, which ensures that parallel code changes are completed without any hiccups, and it’s a two-click setup! I have seen a huge reduction in merge conflicts thanks to GitFlow.
It’s Free
It doesn’t cost a thing to download or use SourceTree, great huh!?

Installing SourceTree

Go to the Sourcetree website and click the download button.
From the ZIP file you download, click the application file (EXE for Windows or DMG for Mac) to download.
After you install, you’ll have to agree to the Atlassian Customer Agreement and hit Continue.
You need an Atlassian account to use Sourcetree. When you get to this screen, click either Use an existing account or Go to My Atlassian and follow the prompts to create a new account. Once you’ve got an account, you’ll be able to log in with Use an existing account.
If you want to connect to a remote hosting service, use the default options as you enter your Bitbucket or GitHub credentials. If you can’t continue without generating an SSH key, select HTTPS to continue or see Set up an SSH key for more details about setting up SSH with Sourcetree.
Follow the prompts until you’re done with the setup. If you aren’t ready to clone a repository, click Skip Setup.

Connecting to GitHub

Firstly, sign up on GitHub, if you already don’t have a GitHub account.
Switch to SourceTree. Click the gear icon and select Accounts.
Click Add from the Accounts tab.
After you select a GitHub as Host, enter your hosting details. Keep the default Auth Type and click Connect Account to enter your credentials.
When you enter your account details, you can choose whether you prefer to connect with HTTPS or SSH. Choose HTTPS for now.
An authentication window will open in your browser. Login with your GitHub Credentials and grant permission.
Hola…!!! 🙌 Your Github account is logged into SourceTree and you are good to go.

Breakfast + Lunch + Dinner Commands

These are the commands which are highly used in each and every project.

git init <directory>
Create empty Git repo in the specified directory. Run with no arguments to initialize the current directory as a git repository
git add <directory>
Stage all changes in <directory> for the next commit. Replace <directory> with a <file> to change a specific file.
git commit -m "<message>"
Commit the staged snapshot, but instead of launching a text editor, use as the commit message.
git push <remote> <branch>
Push the branch to <remote>, along with necessary commits and objects. Creates named branch in the remote repo if it doesn’t exist.
git pull <remote>
Fetch the specified remote’s copy of the current branch and immediately merge it into the local copy.
git clone <repo>
Clone repo located at onto local machine. The original repo can be located on the local filesystem or on a remote machine via HTTP or SSH.
git status
List which files are staged, unstaged, and untracked.
git log
Display the entire commit history using the default format. For customization see additional options.
git diff
Show unstaged changes between your index and working directory.

PowerUser Tips

Here are the tips to make the best use of Git with your projects.

Git CheatSheet is available HERE

SourceTree Shortcuts are available HERE

SourceTree Dark Mode

Enable Dark Theme for SourceTree in Tools >> Options.

Push with Commit

Tick the checkbox against 'Push changes immediately...' to make sure your changes are updated on the remote repository as soon as you commit the change to the local copy of repository.

SourceTree QuickAccess Menu

Use the QuickAccess menu to access frequently used features easily.

Terminal to open Terminal directly at the repository directory
Remote to open the remote repository in the browser
Explorer to open the local repository in the File Explorer

Faster Repository Search

Press Ctrl + B on your keyboard to toggle Bookmarks Sidebar.
Type your search query straight away.
Hit ENTER to open the Working Copy of repo in SourceTree.

🔍 Read more of my Articles

How to install Flutter on Mac & Windows

Shivam Goyal for Enappd ・ Sep 26 '19

#flutter #google #mac #windows

What’s new with Flutter 1.9 & how to upgrade to the latest version

Shivam Goyal ・ Sep 25 '19

#flutter #dart #android #ios

🎯 That’s all for today.

If you got any queries hit me up in the comments or ping me over on hi@itsshivam.com 📧

If you learned even a thing or two, hit that ❤️ button as many times as you can to show your support! It really motivates me to contribute to the community.

Feeling too generous? Buy me a Drink 🍺
Wanna collaborate? Let’s talk some tech 😄
Stalk me over on itsshivam.com, GitHub, or LinkedIn. 👀

How to install Flutter on Mac & Windows

Shivam Goyal — Thu, 26 Sep 2019 09:40:41 +0000

In this post, we’ll have an overview of Flutter, the latest buzz in app development market. Flutter is gaining popularity faster than any other framework. Some say it is Google’s answer to Facebook’s React Native, but that debate is for later. Let’s learn the basics of Flutter and how to start using it.

What is Flutter?

Flutter is Google’s portable UI toolkit for crafting high-quality native experiences for mobile, web and desktop in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

What does Flutter do?

For users, Flutter makes beautiful app UIs come to life.

For developers, Flutter lowers the bar to entry for building mobile apps. It speeds up the development of mobile apps and reduces the cost and complexity of app production across iOS and Android.

For designers, Flutter helps deliver the original design vision, without loss of fidelity or compromises. It also acts as a productive prototyping tool.

What technology is Flutter built with?

Flutter is built with C, C++, Dart, and Skia (a 2D rendering engine). See this architecture diagram for a better picture of the main components.

Why use Flutter?

Develop for iOS and Android from a single codebase
Do more with less code, even on a single OS, with a modern, expressive language and a declarative approach
Experiment by changing code and reloading as your app runs (with hot reload)
Fix crashes and continue debugging from where the app left off
Benefit from a rich set of Material Design and Cupertino (iOS-flavor) widgets built using Flutter’s own framework
Realize custom, beautiful, brand-driven designs, without the limitations of OEM widget sets

How to Install Flutter on Windows?

Minimum System Requirements

Operating Systems: Windows 7 or later [64-bit]
Disk Space: 400 MB
Git for Windows

Get the Flutter SDK

Download Latest Flutter SDK HERE
Unzip the downloaded zip in C:\flutter .
Locate flutter_console.bat inside the flutter directory and start it by double-clicking.

Update your path

If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATHenvironment variable:

From the Start search bar, type ‘env’ and select Edit environment variables for your account
Under User variables check if there is an entry called Path:
If the entry does exist, append the full path to flutter\bin using ; as a separator from existing values.
If the entry does not exist, create a new user variable named Path with the full path to flutter\bin as its value.

Note that you will have to close and reopen any existing console windows for these changes to take effect.

Run flutter doctor

From a console window which has the Flutter directory in the path (see above), run the following command to see if there are any platform dependencies you need to complete the setup:

C:\flutter>flutter doctor

This command checks your environment and displays a report of the status of your Flutter installation. Check the output carefully for other software you may need to install or further tasks to perform (shown in bold text).

For example:

[-] Android toolchain - develop for Android devices
    • Android SDK at C:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
     visit https://flutter.dev/setup/#android-setup for detailed instructions.

Android Setup

Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors.

Install Android Studio

Download and install Android Studio.
Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

Set up your Android device

To prepare to run and test your Flutter app on an Android device, you’ll need an Android device running Android 4.1 (API level 16) or higher.

Enable Developer options and USB debugging on your device. Detailed instructions are available in the Android documentation.
Windows-only: Install the Google USB Driver
Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.
In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device.

By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_HOME environment variable to that installation directory.

Install the Flutter and Dart plugins

Start Android Studio.
Open plugin preferences (File > Settings > Plugins).
Select Browse repositories, select the Flutter plugin and click Install.
Click Yes when prompted to install the Dart plugin.
Click Restart when prompted.

How to Install Flutter on MacOS?

Minimum System Requirements

Operating Systems: macOS [64-bit]
Disk Space: 700 MB
Git for macOS

Get the Flutter SDK

Download Latest Flutter SDK HERE
Extract the file in the desired location e.g.

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip

Add the flutter tool to your path. To do this, open your bash profile from your terminal (might need sudo)

$ sudo vim ~/.bash_profile

Add your flutter path to the $PATH variable in bash_profile.

E.g. If you extracted flutter in your Applications folder, your path will be /Applications/flutter/bin . Add this to the existing $PATH variable by using : in between two paths. Once added, save and close the bash_profile . Run terminal again and check the $PATH by running

$ echo $PATH

You should see your Flutter path added to the $PATH

Run flutter precache in the terminal.

Run flutter doctor

Run the following command to see if there are any dependencies you need to install to complete the setup (for verbose output, add the -v flag):

$ flutter doctor

This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you may need to install or further tasks to perform (shown in bold text).

For example: If you haven’t used Flutter before, you might see an output like this by running flutter doctor

Flutter doctor output on a fresh system

You can see there are several things to be done to begin using Flutter in this Mac. To correct these issues, let’s run following commands

Fix license issue in Android studio

$ flutter doctor --android-licenses

Fix iOS toolchain issues

( Install Xcode command line tools if you are on Mac OS Mojave)

$ brew update

$ brew install --HEAD usbmuxd

$ brew link usbmuxd

$ brew install --HEAD libimobiledevice

$ brew install ideviceinstaller

Update iOS-deploy

$ npm install -g ios-deploy

brew does not maintain it any longer, as flutter doctor suggests

Android Studio — Install Flutter and Dart plugins

Start Android Studio.
Open plugin preferences (Preferences > Plugins on macOS, File > Settings > Plugins on Windows).
Select Browse repositories, select the Flutter plugin and click Install.
Click Yes when prompted to install the Dart plugin.
Click Restart when prompted.

Install Flutter and Dart plugin in Android Studio

Install VSCode Flutter Extension

Now all issues should be gone

We are GO flight!

iOS Setup

Install Xcode

To develop Flutter apps for iOS, you need a Mac with Xcode 9.0 or newer:

Install Xcode 9.0 or newer (via web download or the Mac App Store).
Configure the Xcode command-line tools to use the newly-installed version of Xcode by running the following from the command line:

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

This is the correct path for most cases, when you want to use the latest version of Xcode. If you need to use a different version, specify that path instead.
Make sure the Xcode license agreement is signed by either opening Xcode once and confirming or running sudo xcodebuild -license from the command line.

With Xcode, you’ll be able to run Flutter apps on an iOS device or on the simulator.

Set up the iOS simulator

To prepare to run and test your Flutter app on the iOS simulator, follow these steps:

On your Mac, find the Simulator via Spotlight or by using the following command:

$ open -a Simulator

Make sure your simulator is using a 64-bit device (iPhone 5s or later) by checking the settings in the simulator’s Hardware > Device menu.
Depending on your development machine’s screen size, simulated high-screen-density iOS devices may overflow your screen. Set the device scale under the Window > Scale menu in the simulator.

Create and run a simple Flutter app

To create your first Flutter app and test your setup, follow these steps:

Create a new Flutter app by running the following from the command line:

$ flutter create my_app

A successful creation will show something like this

A my_app directory is created, containing Flutter’s starter app.

Flutter app directory

CD into this directory:

$ cd my_app

To launch the app in the Simulator, ensure that the Simulator is running and enter:

$ flutter run

Your first Flutter iOS app is running in Simulator !! 👻

Deploy to iOS devices

To deploy your Flutter app to a physical iOS device, you’ll need some additional tools and an Apple account. You’ll also need to set up physical device deployment in Xcode.

Install homebrew.
Ensure that homebrew is up to date:

$ brew update

Install the tools for deploying Flutter apps to iOS devices by running the following commands:

$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup

Android setup

Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors; a later step will discuss that.

Install Android Studio

Download and install Android Studio.
Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

Set up your Android device

To prepare to run and test your Flutter app on an Android device, you’ll need an Android device running Android 4.1 (API level 16) or higher.

Enable Developer Options and USB debugging on your device. Detailed instructions are available in the Android documentation.
Windows-only: Install the Google USB Driver
Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.
In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device.
Once ready, run flutter run again to run the app on Android device 😎

Set up the Android emulator

To prepare to run and test your Flutter app on the Android emulator, follow these steps:

Enable VM acceleration on your machine.
Launch Android Studio > Tools > Android > AVD Manager and select Create Virtual Device. (The Android submenu is only present when inside an Android project.)
Choose a device definition and select Next.
Select one or more system images for the Android versions you want to emulate, and select Next. An x86 or x86_64image is recommended.
Under Emulated Performance, select Hardware — GLES 2.0 to enable hardware acceleration.
Verify the AVD configuration is correct, and select Finish. For details on the above steps, see Managing AVDs.
In Android Virtual Device Manager, click Run in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.

More resources for Flutter

Flutter Documentation
Build Native Mobile Apps with Flutter | Udacity
Flutter Community
Flutter YouTube Channel
Flutter Cookbook
My GitHub Profile @ShivamGoyal1899

YaY..!! 👻 You’re almost done. Now, you are ready to design beautiful Android and iOS Apps with Flutter.

What’s new with Flutter 1.9 & how to upgrade to the latest version

Shivam Goyal — Wed, 25 Sep 2019 22:19:45 +0000

Flutter has got a new & improved version of itself in it’s September release. The release is available now in the stable channel for users to upgrade. The new features and updates span a wide range, from support for macOS Catalina and iOS 13 to improved tooling support, as well as new Dart language features and new Material widgets.

Upgrading to Flutter 1.9

If you already have Flutter on your system and you’re on the default stable channel, you can upgrade to version 1.9 by running flutter upgrade from the command line.

If you want to freshly install Flutter on your system, this is the place for you:

How to install Flutter on Mac & Windows

Shivam Goyal for Enappd ・ Sep 26 '19

#flutter #google #mac #windows

New Features & Upgrades

New widgets and framework enhancements

ToggleButtons
The ToggleButtons widget bundles a row of ToggleButton widgets together, often composed of a set of Icon and Text widgets, to form a set of buttons with fully customizable look and behavior. Do you want a single selection or multi-select? Do you want to require at least one selection or allow none? Do you want a square or rounded edges, thick or thin borders, icons or text, etc? You can see some of these options below.
ColorFiltered
As shown in the image below, the ColorFiltered widget allows you to recolor a tree of child widgets just like you can recolor an image using one of several different algorithms (some of which are shown in the example screenshot above). This has many uses, for example, handling color blindness accessibility issues for your users.

Worldwide language support

Google has also added support for 24 new languages, out of which 7 are Indian languages.

Dart 2.5 release

The end-to-end developer experience depends not just on the features of Flutter but also on the underlying language itself. As part of the Flutter 1.9 release, Google is also releasing Dart 2.5. Dart 2.5 includes a pre-release of Foreign Function Interface (FFI) support, providing native extensions so Dart can call directly into code written in C. It also introduces machine learning-powered code completions for the IDE. You can learn about both of these and more in the Dart 2.5 announcement.

Support for macOS Catalina and iOS 13

As Apple prepares to release Catalina, the latest version of macOS, Google has worked hard to make sure that Flutter is ready for you to upgrade. Google has updated the end-to-end tooling experience to ensure it works well on Catalina and with Xcode 11. This includes adding support for the new Xcode build system, enabling 64-bit support throughout the toolchain, and simplifying platform dependencies.

With iOS 13 on the way, Google has also been working to ensure your Flutter apps look great on the latest iPhone release. Flutter 1.9 includes an implementation of the iOS 13 draggable toolbar, with both long-press and drag-from-right, and supports vibration feedback. Work on iOS dark mode is also well underway with a number of pull requests already merged.

Finally, in the latest development builds, you can now turn on experimental support for Bitcode, which is Apple’s platform-independent intermediate representation of a compiled program. Submitting your app as Bitcode allows Apple to optimize your binary in the future without resubmission, and opens the door to Flutter potentially supporting platforms like watchOS and tvOS that require Bitcode for app submission.

Toolchain improvements

With this release, new projects default to Swift instead of Objective-C and Kotlin instead of Java for iOS and Android projects respectively. Since many packages are written with Swift, making it the default language removes manual work for adding those packages to an app created with the default options. Swift 5 is ABI stable, and thanks to app thinning work Apple has done in recent releases, the Swift dynamic libraries no longer need to be included in the distribution package for iOS 12.2 or greater, reducing the size of Swift applications compared to previous releases.

And as Kotlin is now the default language for new projects in Android Studio, it seems natural to make the language switch for Android also. These options are now the default for both the flutter CLI tool and the IntelliJ/Android Studio and VS Code plugins for Flutter, but you can always switch back to Objective-C or Java if you prefer.

Error Message Beautification

Google has been working to improve Flutter’s error messages by making them more readable, more concise and more actionable.

In the latest release of the Flutter plugin for IntelliJ/Android Studio and the extension for VS Code, Google shipped a new feature that displays error messages in a rich, yet concise, format. The logging console can now display error messages with the following improvements:

Highlighting the summary of the error in red
Adding whitespace between sections to make the message more scannable
Calling out the hint in the message, if available, for resolving the error
Collapsing long lists and trees in the message

Flutter web is stable

And finally, the flutter_web repository is deprecated now the web support has been merged into the main flutter repository! What this means is that if you have the latest builds of Flutter from the master or dev channel, you can target the web with the latest experimental version of Flutter by running flutter run -d chrome.

When you create a project, Flutter now creates a web runner via a minimal web/index.html file that bootstraps your web-compiled Flutter code. With that file in place, you can use the Flutter CLI tool or the IDE plugins to edit and run Flutter apps on the web.

Above is a screenshot of VS Code with web support enabled for Flutter. Notice the web/index.html file, along with the dropdown list allowing you to choose Chrome as your target development device. Support for web output with Flutter is still at an early phase, but this release represents a major step forward towards enabling production support for web development with Flutter.

Some major Flutter Web Applications are:

Flutter Widget Livebook is built with Flutter for web and shows Flutter widgets running live in your browser.
Panache is a tool for creating themes for Flutter which you can then download and drop directly into your code.

Over 1500 PRs merged on Github

This release is Flutter’s biggest update yet with more than 1,500 PRs from more than 100 contributors in the two months since their last stable release in July.

🔍 Read more of my Articles

How to install Flutter on Mac & Windows

Shivam Goyal for Enappd ・ Sep 26 '19

#flutter #google #mac #windows

Understanding Version Control Systems: GitHub Simplified with SourceTree

Shivam Goyal for GitHub Campus Experts ・ Sep 27 '19

#git #sourcetree #github #versioncontrol

🎯 That’s all for today.

If you got any queries hit me up in the comments or ping me over on hi@shivamgoyal.co 📧

If you learned even a thing or two, hit that ❤️ button as many times as you can to show your support! It really motivates me to contribute to the community.

Feeling too generous? Buy me a Drink 🍺
Wanna collaborate? Let’s talk some tech 😄
Stalk me over on shivamgoyal.co, GitHub, or LinkedIn. 👀