Flutter App: Card using Card Class, Padding, List Tile

 

Flutter App: Card using Container , Row Layout

Container, Row

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: Column(
            children: [
              CircleAvatar(
                radius: 50.0,
                backgroundImage: AssetImage('images/sreeraj.jpg'),
              ),
              Text(
                'Sreeraj Melath',
                style: TextStyle(
                    fontFamily: 'Pacifico',
                    fontSize: 40.0,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
              Text(
                'FLUTTER DEVELOPER',
                style: TextStyle(
                    fontFamily: 'SourceSansPro',
                    fontSize: 20.0,
                    letterSpacing: 3,
                    color: Colors.teal[100],
                    fontWeight: FontWeight.bold),
              ),
              Container(
                color: Colors.white,
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                padding: EdgeInsets.all(10.0),
                child: Row(
                  children: [
                    Icon(Icons.phone, color: Colors.teal[900]),
                    SizedBox(
                      width: 20.0,
                    ),
                    Text(
                      "+91 9846 098 460",
                      style: TextStyle(
                          color: Colors.teal[900],
                          fontFamily: 'SourceSansPro',
                          fontSize: 20.0,
                          fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
              ),
              Container(
                color: Colors.white,
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                padding: EdgeInsets.all(10.0),
                child: Row(
                  children: [
                    Icon(
                      Icons.email,
                      color: Colors.teal[900],
                    ),
                    SizedBox(
                      width: 20.0,
                    ),
                    Text(
                      "sreeraj@infoexpo.in",
                      style: TextStyle(
                        fontFamily: 'SourceSansPro',
                        fontSize: 20.0,
                        color: Colors.teal[900],
                        fontWeight: FontWeight.bold,
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

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

MERN STACK - Amazona Project Part 3

Multiple items in cart need to be saved in cookies

Cookies setup 

npm install js-cookie

in frontent folder

import Cookie from "js-cookie";

---

const removerFromCart = (productId) => (dispatch, getState) => {

    dispatch({ type: CART_REMOVE_ITEM, payload:productId });

    const { cart: {cartItems } }  = getState();

    Cookie.set("cartItems", JSON.stringify(cartItems));

}

store.js

const cartItems = Cookie.getJSON("cartItems") || [];

const initialState = { cart : {cartItems} };

 

Mongo DB setup

create .env file in the root amazona

MONGODB_URL=mongodb://localhost/amazona

npm install dotenv

Create config.js inside amazon/backend/ 

export default {

    MONGODB_URL: process.env.MONGODB_URL || 'mongodb://localhost/amazona'

}

Add  to server.js

import dotenv from 'dotenv';

import config from './config';

dotenv.config();

Download and install MONGO DB  

http://mongodb.com/download-center/community

Install mongoose  @amazona root

npm install mongoose

Add in server.js 

const mongodbUrl = config.MONGODB_URL;

mongoose.connect(mongodbUrl, {

    useNewUrlParser:true;

}).catch(error => console.log(error.reason));

Create Models/userModel.js in backend

import mongoose from 'mongoose';

const userSchema = new mongoose.Schema({

    name: { type: String, required:true },

    email: { type: String, required: true, unique:true },

    password: { type: String, required:true },

    isAdmin: { type:Boolean, required, default: false }

});

const userModel = mongoose.model("User", userSchema);

export default userModel;

Create Routes/userRoute.js  in backend

import express from 'express';

import User from '../models/userModel';

const router = express.Router();

router.get("/api/users/createadmin", async(req, res) => {

    

    try {

        const user = new User({

            name: 'Sreeraj',

            email: 'sreeraj@infoexpo.in',

            password:'12345',

            isAdmin: true

    

        });

        const newUser = await user.save();

        res.send(newUser);

    } catch (error) {

        res.send({ msg: error.message });

    }

});