Flutter Quick Guide

Flutter Quick Guide

Flutter Web Responsive

Flutter, being a cross-platform app development framework, supports devices with widely varying screen sizes: It can run on a device as small as a smartwatch to devices like a large TV. It’s always a challenge to adapt your app to such a variety of screen sizes and pixel densities using the same codebase. Especially on a website, you don’t know that the user is opening a website on a 27-inch monitor or 6-inch mobile. For instance, you make a button according to the desktop website and you set the width of the button to 600 pixels, and the user opens the website on a mobile which has a width of 500 pixels so obviously, the button will be over pixelated.

Constraints
One of the revolutionary tools introduced in the world for UI design is the Constraint Layout . It can be used for creating flexible and responsive UI designs that adapt to different screen sizes and dimensions. Constraint Layout allows you to specify the position and size for each view according to spatial relationships with other views in the layout.

Example of BoxConstraints usage:

Container(
constraints: BoxConstraints(
minHeight: 50,
maxHeight: 100,
),
child : TextField(
decoration: InputDecoration(
errorText: ‘no image’,
))
)

Common Web Widgets

When designing a web layout, there are some components that are common to all layouts. Usually a web contains a header, a footer, a sidebar, a nav bar and much more components. These components are also built in Flutter widgets but maybe there name can be different.

Navigation Menu

NavBar
First create a Scaffold to get the layout of the page.


class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: Scaffold(
        appBar: PreferredSize(
            preferredSize: Size(double.infinity, 100),
            child: Container(
              height: 100,
              color: Colors.blue,
              child: Row(
                children: [],
              ),
            )));
  }
}

Here we are wrapping Row widget with PreferredSize use Container instead of AppBar. PreferredSize can be use to control sizing of AppBar.
We will use logo in the leading of our Nav Bar.


Row(
  children: [
    Image(
        image: NetworkImage(
            'url')),
  ],
),

We will now change the mainAxisAlignment of row to make a feel of nav bar better

mainAxisAlignment: MainAxisAlignment.spaceBetween,


Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Image(
        image: NetworkImage(
            'url')),
    Row(
      children: [
        TextButton(onPressed: () {}, child: Text("Title 1")),
        TextButton(onPressed: () {}, child: Text("Title 2")),
        TextButton(onPressed: () {}, child: Text("Title 3")),
      ],
    ),
    ElevatedButton.icon(
      onPressed: () {},
      label: Text("Title 4"),
      icon: Icon(Icons.phone),
    ),
  ],
),

We’ve added a button to the Nav Bar. We will style it later.


TextStyle _textstyle = TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.black,
  );

now we are styling the button

Padding(
  padding: const EdgeInsets.only(right: 18.0),
  child: ElevatedButton.icon(
    style: ButtonStyle(
        backgroundColor:
            MaterialStateProperty.all(Colors.green),
        shape:
            MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(18.0),
                    side: BorderSide(color: Colors.black)))),
    onPressed: () {},
    label: Text("Title 4"),
    icon: Icon(Icons.phone),
  ),
),

To make it more responsive you need to write this and note you can get an idea how the code is working and implement it in your way!

Scaffold(
      body: LayoutBuilder(builder: ((context, constraints) {
        if (constraints.maxWidth > 600) {
          return DesktopView();
        } else {
          return MobileView();
        }
      })),
    );

Databases Overview (NoSQL vs SQL)

SQL

SQL databases have been around for almost 50 years and are very recognizable, widely-use. It is built around being safe, versatile, and universal.

Think of SQL databases as data being saved as rows in a table with a logical link between tables. The logical link means that the tables have relations between them.

Say you have a users table with users’ information and you also have an orders table that lists all the orders the user purchased from a store. The logical link means that you can easily associate order to a user.

SQL databases usually stick to a strict format called schema which defines the table fields in a particular way and always has to follow that way, making it harder to make big changes after deployment.

When we want to access and retrieve specific bits of information from a database we call that we want to do a query . Queries in SQL are much slower than in NoSQL databases.

We won’t get to implementation details of SQL databases, but if you want to learn more go to https://www.sqltutorial.org/.

NoSQL

NoSQL databases have started to take over the market in the most recent years as it offers many benefits over relational databases. They have more flexible data models, they scale well, and have fast queries. Developers also say that they usually have a better experience with them.

Instead of tables with fixed rows and columns, NoSQL databases usually store data in JSON documents (key-value pairs following a format). To organize the data into separate places, NoSQL databases tend to use the word collection or box to represent an aggregate of similar data.

It has a much more flexible schema than SQL and allows you to store data however you like making queries faster than SQL databases.

During the course, we will be looking into 2 NoSQL databases: Hive for local storage and Firebase (CloudFirestore) for cloud/external storage.

Riverpod: State Management

Why Riverpod?

Riverpod simplifies and improves the Provider package while being very similar to it. It is now a gold standard state management framework widely used in Flutter production applications. It is compiled safe, resolves key issues of the Provider without depending on Flutter and it provides awesome ways to consume state.

Why not Bloc right now?

Bloc is also a great production-ready Flutter framework and is widely used but it adds too much boilerplate, making the lessons too long and complex for someone that never used it. So for e-commerce, we will go with Riverpod and on the Crypto app we will look at Bloc.

Installing Riverpod

Go to your pubspec.yaml file and install flutter_riverpod

Implementing best quality code

Always try to write code in the modular approach and have the best performance

Animations

Introduction to Animations

Animations are key to making your UI more polished and engaging. Flutter animations can make your apps look amazing. In the next set of lessons you will learn different types of animations in Flutter and how you can use them in your apps to further improve user experience.

Different types of animations

Within the animation world of Flutter, we can encounter various different types of animations such as:

  • Implicit animations
  • Explicit animations
  • Staggered animations
  • External animations (Lottie, Rive, etc…)
  • Custom painter animations

Code-Based Animations

Code-based animations are ones that can be achieved by code. There are 2 types of code-based animations:

  • Implicit animations
  • Explicit Animations

Implicit animations

Implicit animations are pre-made animations that Flutter provides to you. To utilize it you just have to change a couple of values here and there. We will be looking into Implicit animations in the next lesson

Examples:

  • Fade in and out
  • Opacity changes
  • Position changes
  • Alignment changes
  • Color change

Explicit animations

Explicit animations are ones that involve customizing the entire animations and sometimes even building from scratch the properties and elements of the animation.

Examples:

  • Circular progress bar animation
  • Custom loading animation

Inside code-based animations there are other categories such as Staggered Animations , Hero Animations, etc…

Drawing-based Animations

Introduction to Testing

Testing is an important concept when comes to developing production applications. The more features your app contains, the harder it becomes to test everything manually. That’s why complex apps require automated tests that can help identify bugs prior to launching. In this chapter, we will look into creating useful tests for your apps.

The base of automated tests is normally divided into 3 categories: Unit, Widget, and Integration.

Unit tests aim at testing single functions, methods, and classes. It is the main goal is to verify that the feature being tested is correct under various conditions. Normally it has few dependencies, with low maintenance cost but also low confidence.

Widget tests on the other hand are tests that test single widgets and how it interacts with the user. The goal is to verify that the UI looks as expected and interacts as expected. It has higher confidence, with a higher maintenance cost compared to Unit tests. Although being quick to execute they can contain lots of dependencies.

#Integration tests normally tend to test the complete app or maybe a large portion of it. It tests how different components interact with each other to make sure all services and widgets are working together as expected. An example of an integration test would be testing if the app builds correctly for example. It is high confidence, with a high maintenance cost, probably has lots of dependencies and it is much slower than the previous tests.

Now that you learned and applied Flutter concepts, is time to deploy your applications.

We will be following the Flutter official documents in order to properly deploy our applications. The source of the deployment lessons comes from docs.flutter.dev and you can find their license here. We will utilize their content as it can help you deploy any application you want. This next set of lessons will be very reference based.

We will be looking into how to deploy apps to Android, IOS, and the Web . If you are looking to deploy desktop apps take a look at the official documentation: