DEV Community: Lahiru Udawaththa

Flutter Login and Sing Up form

Lahiru Udawaththa — Thu, 08 Oct 2020 15:50:53 +0000

//Coding Start

import 'package:flutter/material.dart';
import 'package:signup_ui/Screens/HomeScreen.dart';
import 'Screens/SignInScreen.dart';
import 'Screens/SignUPScreen.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: 'Sign Up Screen ',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      initialRoute: 'SignIn',
      routes: {
        'SignIn':(context)=>SignInScreen(),
         'SignUp':(context)=>SignUpScreen(),
         'Home':(context)=>HomeScreen(),
      },
    );
  }
}

//Coding end

Building ListView in Flutter

Lahiru Udawaththa — Fri, 12 Jun 2020 10:01:58 +0000

Introduction

In this article we are investigate about Flutter ListView Buildere Material Design Flutter App,you can learn about design how easy it is to make ListViews in Flutter.

Prerequisites

Setting up Flutter
First Steps with Flutter: Exploring widgets
First Steps with Flutter: Building layouts
First Steps with Flutter: Responding to user input

Project Setup
Start a new flutter project using Android studio or Visual studio code.
In android studio you can start new flutter project using this menu

In visual Studio code You can star a new project using "Command plate"
click on "view" tab and select "Command plate". and type " Flutter"
and select "Flutter_new project"

Enter your project name.."flutter_listview"

Open main.dart and replace the code with the following code

And next Click on your terminal tab and Select "New terminal"
type this - 'flutter run'

The children of the ListView were ListTiles. A ListTile is a special widget that is preconfigured to handle the most common layouts that you would want in a ListView.

Stateless and Stateful widgets 👩_💻👨_💻

Lahiru Udawaththa — Sun, 07 Jun 2020 06:19:22 +0000

In flutter programming there two kind of widgets.
*STATELESS
*STATEFUL

But before we get into what Stateless and Stateful, we need to understand what is the State of this.
The simplest way to put it, State is something that can change within a widget.

Stateless widgets- This widgets never changes.
"Icons,Buttons,Icon button,Colors and text" are examples for stateless widget...

Stateful widgets- Dynamic,This widget can be change,Its appearance in response to event trigger by user interactions.
when STF(stateful widget) receives data.
Checkbox,Radio,Slider,Form,Text Field are some examples for STF(stateful widget).

Follow this 4 step and create Stateful widgets.

Step 1: Decide which object manages the widget’s state
Step 2: Subclass Stateful Widget
Step 3: Subclass State
Step 4: Plug the stateful widget into the widget tree

More Detail visite.:-https://flutter.dev/docs/development/ui/interactive

AMP

Lahiru Udawaththa — Thu, 04 Jun 2020 11:25:33 +0000

Wooh...The another opensource framework of Google.
AMP is an open source HTML framework developed by the AMP Open Source Project. It was originally created by Google as a competitor to Facebook Instant Articles and Apple News.
AMP is optimised for mobile web browsing and intended to help webpages load faster (light weight Super fast).

Google Search recently announced a new Search ranking signal centered around page experience. We’re excited by the potential for Google’s page experience signal to guide and empower developers to build a better web. Because AMP was developed to help enable development of user-first sites, we believe AMP is a cost-effective and simple solution for publishers to create a great page experience. In today’s post, we want to step through what the announced changes to Google Search mean for the AMP community as well as the web ecosystem.

Google’s continued investment in AMP
Google will continue to invest in AMP, and strongly believes in the AMP Project’s goal to make it easy to create web pages that provide a great user experience. When available, Google Search will continue to direct users to the AMP versions of web pages in the mobile Top Stories feature. This behavior keeps in place hallmarks of the AMP experience, such as privacy-preserving pre-rendering that can happen when content is served from an AMP cache. This also means that the page experience signal for a given search result will be evaluated based on the performance of the AMP page when available.

The AMP Project will continue to focus on creating strong page experiences. AMP’s always up-to-date “evergreen” release schedule means AMP users will get future performance benefits as we make them, without investing additional engineering resources..

How to AMP Works.
The following optimizations combined are the reason AMP pages are so fast they appear to load instantly.

01) Execute all AMP JavaScript asynchronously
02) Size all resources statically
03) Don’t let extension mechanisms block rendering
04) Keep all third-party JavaScript out of the critical path
05) All CSS must be inline and size-bound
06) Font triggering must be efficient
07) Minimize style recalculations
08) Only run GPU-accelerated animations
09) Prioritize resource loading
10) Load pages in an instant

Details By: https://amp.dev/