Flutter App : Layout Row , Widget Sections

 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                width: 100,
                color: Colors.red,
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.yellow,
                  ),
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                  )
                ],
              ),
              Container(
                width: 100,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Flutter App Code: Displaying Asset Image in folder

Right click project folder --> Create images folder --- copy paste the image

Add the asset to the pubspec.yaml

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: AppBar(
          title: Text("National Park"),
          backgroundColor: Colors.blueGrey[900],
        ),
        body: Center(
          child: Image(image: AssetImage('images/bird.png')),
        ),
      ),
    ),
  );
}

Flutter App : Displaying An image

 import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: AppBar(
          title: Text("My Image App"),
          backgroundColor: Colors.blueGrey[900],
        ),
        body: Center(
          child: Image(
            image: NetworkImage(
                'https://images.squarespace-cdn.com/content/v1/5a5906400abd0406785519dd/1552662149940-G6MMFW3JC2J61UBPROJ5/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/baelen.jpg'),
          ),
        ),
      ),
    ),
  );
}

Flutter Hello World App Code

 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Center(
        child: Text('Hello World'),
      ),
    ),
  );
}

Flutter notes

 

Vanilla JS ToDo App - Codes

 mkdir vanilla-js-todo

cd vanilla-js-todo

Intalling touch (unix)

npm install touch-cli -g

touch index.html style.css app.js   

VS CODE :     !    to generate HTML snippet

header.logo + TAB key

link    - for style linking code

install live server extension

https://fonts.google.com/specimen/Raleway?query=ral&sidebar.open=true&selection.family=Raleway:ital,wght@0,300;1,300

font awesome cdn  - cdnjs.com

open index.html by right click - > open with live server

CSS  - click correction

i{

    pointer-events: none;

}

MERN STACK - Amazona Project Part #4 - User Login and Registration

Sign In route

router.post('/signin', async (req, res) => {

    const signinUser = await User.findOne({

        email: req.body.email,

        password: req.body.password

    });

   

});

if(signinUser){

    res.send({

        _id: signinUser.id,

        name: signinUser.name,

        email:signinUser.email,

        isAdmin: signinUser.isAdmin,

        token: getToken(user)

    })

} else {

    res.status(401).send({msg: 'Invalid Email or Password.'});

}

npm install jsonwebtoken

Create util.js  in backend folder

import jwt from 'jsonwebtoken';

import config from './config';

const getToken = (user) => {

    return jwt.sign(user, config.JWT_SECRET, {

        expiresIn: '48h'

    })

}

export{

    getToken

}

Create signIn screen

Create userActions.js

Create userReducer.js

npm install body-parser

middle ware for express - provides post data sent by user to the node app

Create RegisterScreen.js