DEV Community: Assis Ferreira

Flutter Responsiveness (using adaptive concepts)

Assis Ferreira — Wed, 18 May 2022 11:43:14 +0000

Nowadays, we don’t think about building apps, without thinking about their responsiveness, all apps must have the ability to present themselves well regardless of the screen size of the user’s device.

Here I will present how can we achieve a app with responsive design in a easy way, with few lines of code.

Responsive Layout

First lets create a class in our project, it can have the name responsive_layout.dart, it will be a class with capabilities to return a custom widget depending on screen size of the user's device.

import 'package:flutter/material.dart';
class ResponsiveLayout extends StatelessWidget
{
}

Breakpoints

Now inside the class created, let’s create breakpoints, which are points that determine a range or the maximum width of the screen, whose will return a widget according to that width.

class ResponsiveLayout extends StatelessWidget
{
    static const int mobileMaxWidth = 576;
    static const int tabletMaxWidth = 768;
    static const int desktopMaxWidth = 992;
}

Screen Verification

Next, lets create some methods to verify if the width of user screen is on some breakpoint range.

static bool isMobile(context)
{
    return MediaQuery.of(context).size.width <= mobileMaxWidth;
}
static bool isTablet(context)
{
    return mobileMaxWidth < MediaQuery.of(context).size.width
    && MediaQuery.of(context).size.width <= tabletMaxWidth;
}
static bool isDesktop(context)
{
    return tabletMaxWidth < MediaQuery.of(context).size.width
    && MediaQuery.of(context).size.width <= desktopMaxWidth;
}
static bool isLarge(context)
{
    return desktopMaxWidth < MediaQuery.of(context).size.width;
}

Build Layout

Almost in the end, now lets render our ResponsiveLayout according to screen size.

Supported Widgets

class ResponsiveLayout extends StatelessWidget {
...
final Widget mobileBody;
final Widget desktopBody;
final Widget? tabletBody;
final Widget? largeBody;
const ResponsiveLayout({
    Key? key,
    required this.mobileBody,
    required this.desktopBody,
    this.tabletBody,
    this.largeBody
})
: super(key: key);
...

Render Widget

class ResponsiveLayout extends StatelessWidget {
...
@override
Widget build(BuildContext context) {
if(isLarge(context))
{
    if(largeBody != null)
    {
        return largeBody!;
    }
    return desktopBody;
}
if(isDesktop(context))
{
    return desktopBody;
}
if(isTablet(context) && tabletBody != null)
{
    return tabletBody;
}
return mobileBody;
}
...

Result

Now, we must just create a Scaffold page and use our ResponsiveLayout widget.

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
        title: Text("Flutter Responsiveness"),
    ),
    body: ResponsiveLayout(
        mobileBody: Container(color: Colors.red),
        desktopBody: Container(color: Colors.green),
    ),
);
}
}

Resources

You can learn more about Flutter responsive widgets in this link.
https://docs.flutter.dev/development/ui/layout/adaptive-responsive
This project is in github in the link below, it also contains helpers for orientation and flex layout.
https://github.com/assisfery/responsive_layout_flutter

Introduction to Flutter

Assis Ferreira — Sun, 15 May 2022 21:22:12 +0000

What is

Flutter is an open source framework created by Google, to build beautiful apps, natively compiled, multi-platform applications from a single codebase.

They bring an easy and productive way to create mobile and cross-platform applications.

Programming Language

For Flutter development is used the programming language Dart, which is a client-optimized language for developing fast apps on any platform. Its goal is to offer the most productive programming language for multi-platform development.

Versions history

Flutter first version was presented in 2015 on Dart Developer Summit, and it was known as “Sky”.

On September 10, 2019 they released the version 1.9, Flutter’s web support has been merged (“unforked”) into the main repo. Web support hasn’t reached beta, and was not ready yet to be used in production.

On October 1, 2020 they released the version 1.22, they bring supporting iOS 14 and Android 11, new i18n and l10n support, Google Maps and WebView plugins ready for production, a new App Size tool and others features.

On March 3, 2021 in the Flutter Engage Edition the version 2.0 was released, Flutter web and Null Safety move to stable, Flutter desktop moves to beta.

At May 18, 2021 in Google I/O Edition, was released the 2.2 version, the focuses was on polish and optimization, including iOS performance improvements, Android deferred components, updated service worker for Flutter web.

On September 8, 2021 the version 2.5 was released, it brings performance improvements, development tools updates, new Material and App template.

The version 2.8 come out on December 8, 2021, it comes with performance improvements, new Firebase features, desktop status, tooling updates.

On February 3, 2022, Flutter Team released the version 2.10.0 which brings stable release of Windows support.

Platforms

Today with Flutter we can build for:

Mobile -we can develop once and deploy to both iOS and Android.
Web - we can create web apps with the same codebase from your mobile app.
Desktop -we can build desktop apps for Windows, macOS and Linux without rewriting.
Embedded -we can create solutions for smart devices, cars and others.

Showcase

There are a lot of famous apps that use Flutter for its development, here are some examples:

Google Pay
BMW mobile app
eBay
Nubank
Google Stadia
Toyota embedded in-vehicle technology

Useful Links

https://flutter.dev/
https://dart.dev/
https://github.com/Solido/awesome-flutter
https://docs.flutter.dev/whats-new

Dart in 5 minutes

Assis Ferreira — Sat, 26 Mar 2022 20:05:43 +0000

Dart is a free and open source language, powered by Google that aim to be a client-optimized for build fast app for all platforms.

Hello Word

Legend has it that the best way to start is in this way.

void main()
{
    print("Hello World");
}

Console Output

To print some in text in console, just use the code below.

print("some text here...");

In another way, you must import the package/library dart:io and use stdout.write(“”) function.

import 'dart:io';

void main() {
    stdout.write("Hello World");
}

Console Input

First import dart:io in top of your code.

import 'dart:io';

Now use that function.

var input = stdin.readLineSync();

Comments

Dart supports 3 types of comments.

Single-line comment

In line start, use // to comment just one line.

// this is a simple comment

Multi-line comment

To create a multi-line comment, start the comment block with /* and end with */

/* this is
multi-line comment
block */

Documentation comment

Documentation comments is very useful, allow the IDE and text editor to orient the developers how they can use some feature created by you.
To start documentation comments, start the block with /// or /**

/// you can call
/// that method to make ...

/***
this class store user data
*/

Variable

To create variable you can just do as code below.

DataType variableName = value;

Examples

// create a variable x
var x;
// assign some value to variable x
x = 18;

Or you can do all in one line.

// create a variable named y and assign some value
var y = 18;

In dart type is optionally, you can just create a variable with var keyword, or can can specify the type.

// variable of type integer
int z = 20;
// variable of type String
String name = "John";

Dart supports many types of variables:

int— store a integer number

int age = 18;

double— store a double precision number

double pi = 3.14;

String— store a text

String address = “Mindelo”;

bool— store booleans values

bool approved = true;

List— also know as array, store a list of values

List cars = [ "Honda", "Toyota" ];

Set— store a list of distinct values

Set islands = { "Santiago", "Fogo", "Brava" };

Map— store a object having key and values pair, both can be of any value

Map person = {
    "name": "Cesária",
    "last_name": "Évora",
    "profession": "Singer"
};

Constants

Sometimes we want that variable values never change, for that we can use const and final keywords.
If you want a create a constant in compile-time use const, if you want to create a constant in runtime use final, for example you can make a user input as a constant using final.

// define a constant with name pi and value 3.14
const pi = 3.14;

// define a constant using final
final americaCapital = "Washington";

// define const from user input
final userName = stdin.readLineSync();

Function

Below is a example to create a function to sum two numbers.

// function declaration
int sum(int x, int y)
{
    return x + y;
}
// call the function
int c = sum(4, 5);
// it will return the value of the sum 4 + 5

Class

To declare a class you can do as the code below.

class Person
{
    String name;
    int age;
   Person(this.name, this.age );
}

Now just create a object from that class.

var someone = Person("David", 27);

Conditions

if

var age = 10;
if(age < 18)
{
    print("You are really young.");
}
else if(age < 30)
{
    print("You are 30.");
}
else
{
   print("You are adult.");
}

switch…case

var animal = "dog";
switch(animal)
{
    case "dog":
        print("Aw aw awww");
    break;
    case "cow":
        print("Mu mu muuu");
    break;
    default:
        print("sound not found");
    break;
}

Loops

for

for(var i = 0; i < 10; i++)
{
    print(i);
}

while

var i = 0;
while(i < 10)
{
    print(i);
    i++;
}

do while

var i = 0;
do
{
    print(i);
    i++;
} while(i < 10);

References

Photo by Clem Onojeghuo on Unsplash

https://dart.dev/

Flutter CLI Cheat Sheet

Assis Ferreira — Sun, 20 Mar 2022 14:01:23 +0000

This is a cheat sheet for the most useful commands you will need when developing a flutter app.

Help

To see all the commands, call the help as below.

flutter --help

flutter -h

Start Project Commands

New project

To create a new project just run the below command, don't forget to replace myproject to your project name lol.

flutter create myproject

You can specify your company website and it will be used to create your application id.

flutter create --org=com.mycompany myproject

May you want to create a project with distinct folder name from project name.

flutter create --org=com.mycompany --project-name=myproject myfolder

Development Commands

Run

To run your project, just go to root directory of your project and run the code below, and next choose the device where you want to run your project.

flutter run

Install Package

To install a package use the code below.

flutter pub add package_name

Update Packages

To update all the packages in your project, run the command below.

flutter pub upgrade

Build

To build your app and start using it in production, use that command.

flutter build target_platform_name --release

SDK Commands

Devices

List all the devices available in you computer.

flutter devices

Channel

Flutter has tree release channel, you can list them using the command below.

flutter channel

To switch the channel you want to use for your development, run the command below.

flutter channel channel_name

Bug Report

Upgrade

Upgrade the Flutter SDK.

flutter upgrade

Doctor

Show information and status of installed tools.

flutter doctor

References

Photo by Rodion Kutsaev on Unsplash

https://docs.flutter.dev/reference/flutter-cli

My SocialShare Library hits 1 million in last month

Assis Ferreira — Fri, 01 Oct 2021 10:31:20 +0000

2 years ago i started a simple library to make easy share a page or some info in all important Social Network, and in the last month it hits 1 million request.

The details about the library you can find here: https://github.com/assisfery/SocialShareJS .

With few lines of code you can make your page shareable

Code

<div class="ss-box"></div>

Result

Chat made with Deno

Assis Ferreira — Mon, 01 Jun 2020 00:40:43 +0000

There are few days that was launched the Deno, a new JavaScript and TypeScript runtime built in Rust. In this project we use that technology to create a simple web chat.

The project code is hosted in that repository: https://github.com/assisfery/WebSocket-Chat-made-with-Deno

Web Server

Here we load the Web Server module to host our index file.

import { listenAndServe } from "https://deno.land/std/http/server.ts";

listenAndServe({port: 8000}, async(req) => {

    if(req.method == "GET" && req.url == "/")
        req.respond({ body: await Deno.open('index.html') });

});

WebSocket Server

We load the WebSocket client and WebSocket Serve module,
to listen client message and broadcast to every user connected.

import { WebSocket, WebSocketServer } from "https://deno.land/x/websocket/mod.ts";

const wss = new WebSocketServer(8080);

wss.on("connection", function (ws: WebSocket) {

    ws.on("message", function (message: string) {

        console.log(message);

        wss.clients.forEach(function each(client) {
            if (!client.isClosed) {
                client.send(message);
            }
        });

    });

});

WebSocket Client

In our index file we handle our WebSocket client using JavaScript native API.

var userName = null;
var clientWS = null;

function main()
{
    if($("#usr").val() == "")
    {
        swal("Warning", "Empty name!", "warning");
        return;
    }

    userName = $("#usr").val();

    $("#loader").show();
    $("#sign-in").hide();

    clientWS = new WebSocket("ws://localhost:8080");

    clientWS.onopen = function (event) {
        swal("Conneceted", "Connected successfully!", "success");

        $("#loader").hide();
        $("#chatbox").show();           
    };

    clientWS.onerror = function (event) {
        swal("Error", "Something happens!", "error");

        $("#chatbox").hide();
        $("#sign-in").show();           
    };

    clientWS.onclose = function (event) {
        swal("Closed", "Your connection was closed!", "info");

        $("#chatbox").hide();
        $("#sign-in").show();           
    };

    clientWS.onmessage = function (event) {
        console.log(event.data);

        var message = JSON.parse(event.data);

        if(message.type == "message")
        {
            if(message.user != userName)
                $("#message-box").append('<div><div class="bubble"><b>' + message.user + ': </b>' + message.content + '</div></div>');
            else
                $("#message-box").append('<div class="text-right"><div class="bubble bubble-info"><b>' + message.user + ': </b>' + message.content + '</div></div>');
        }


    };
}

function send()
{
    if($("#msg").val() == "")
        return;

    var message = {
        type: "message",
        user: userName,
        content: $("#msg").val(),
    };

    clientWS.send(JSON.stringify(message));

    $("#msg").val("");
}