How to create a Simple Screen in native android, Flutter and React-native -ReactNative- lecturer

[AsimAyman]

1. paste the image you will use to Drawable folder so you can find it by path
2. res>layout>Activity-main.xml this it the flie we design our app in
3. RelativeLayout means that all design items is related to the frame
   
4. make the layout fill all screen width and hight

android:layout_width="match_parent"
android:layout_height="match_parent"

5. give the image path

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#3b5998"
    >

    <ImageView
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:src="@drawable/facebook"
        android:layout_centerInParent="true"

        >


    </ImageView>

</RelativeLayout >

Create facebook splash by native android code

[React Native - Environment Setup]

[AsimAyman]

React Native - Environment Setup

1. in React you have to create the folder then paste in it all images you will use.
2. App.js is the start point file and render function launch UI so it return our design.
3. We need to use a componant named View so we will import it

import {View} from 'react-native'

4. App class should inherent React.Componaent which contains all Componant we will use like Image

export default class App extends React.Componaent{
    render(){
<View>
  <Image>sourse ={require ("Image paht")}<Image>
</View>
}

}

5. we can create a const contains all styles and call it every time we need

const style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#ffffff",
    },
    title: {
      fontSize: 12,
      color: "#000",
   }
})

Create facebook splash by React-native

[AsimAyman]

Create facebook splash by flutter

1. same as React Native we have to create a folder we will name it assets for example.
2. add the images we will use in it.
3. add to pubspect.yaml the path of the folder and images we will use.

  assets:
    - images/facebooklogo.png

4. click on pub get so it can reload the resource.
5. after we added the image now we can create our page.

lib>>main.dart
this is the start point of the project contains the Master Function main.

main() {
  runApp(myApp());
}

6. call runApp function which display fist screen we will create soon,
7. to call runApp we have to import MaterialApp which contains all dart methods

import 'package:flutter/material.dart';

8. create our class myApp inherent StatelessWidget which contains all widget -reusable blocks- we will use
9. even we inherited StatelessWidget we have to override the build function which returns our screen.
10. return Scaffold which is the screen in flutter and in its body we will use the path of logo image throw Image.assets widget which is provided by MaterialApp we imported before.

11.Scaffold which is the Screen it Contains all screen attributes we need lie background color,so we can change the color using Colors enum For Standers colors and using Color() for rgb colors

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

  @override
  Widget build(BuildContext context) {
    return
      Scaffold(
        backgroundColor: Colors.blue.,
      body: Image.asset("assets/facebook.png"),
    );
  }
}

notes:
. Every thing in flutter is a Widget.