Implementing a Date Time picker in React Native (2021)

Date pickers are a common and essential component for many apps across platforms, especially those that facilitate event booking—like a hotel booking app—to aid seamless date selection. 

Date pickers improve app usability by reducing the complexities of date validation issues by ensuring that invalid dates cannot be entered, restricting date ranges, and eliminating date format confusion (for example, is ‘7/9/10’ July 9, 2010 or September 7, 2010).

The React Native framework used to provide React-Native date picker APIs for Android and iOS [DatePickerAndriod and DatePickerIOS]are now deprecated.



Our choices now are to either build a date picker from scratch or use another date picker library.

I recently discovered an elegant solution to this problem using CSS Grid. In this post, we'll learn how it works!


Step 1: The Solution


We are going to use this nice component react-native-datetimepicker/datetimepicker which is a neat and elegant approach to implement a Date and Time picker for both iOS and Android.


Step 2 : The Installation 👏


npm i @react-native-community/datetimepicker

If you are using yarn

yarn add @react-native-community/datetimepicker


I :
By default, the picker height is fixed to 216px. The picker’s text color is controlled by the application theme (light / dark mode). In dark mode, the text is white, and in light mode, the text is black.




Step 3: Adding the picker component

Let's import the picker component first and then we can add it to the screen or App.js

import DateTimePicker from '@react-native-community/datetimepicker';

To add the picker component by adding the <DateTimePicker/>

<DateTimePicker
          value={date}
          mode={'date'}
          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
          is24Hour={true}
          onChange={onChange}
          style={styles.datePicker}
        />


Let's build a simple UI to test the DateTime picker. 

In this example, we are going to add a button and a text view which is going to display the selected value from DateTime picker.




 <View style={styles.container}>
      {/* Display the selected date */}
      <View style={styles.pickedDateContainer}>
        <Text style={styles.pickedDate}>{date.toUTCString()}</Text>
      </View>

      {/* The button that used to trigger the date picker */}
      {!isPickerShow && (
        <View style={styles.btnContainer}>
          <Button title="Show Picker" color="#9AD54B" onPress={showPicker} />
        </View>
      )}


Step 4: Add some Styling !


const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    padding: 50,
  },
  pickedDateContainer: {
    padding: 20,
    backgroundColor: '#E0F01F',
    borderRadius: 10,
  },
  pickedDate: {
    fontSize: 18,
    color: '#1F0FE0',
  },
  btnContainer: {
    padding: 30,
  },
  // This only works on iOS
  datePicker: {
    width: 320,
    height: 260,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
});



Step 5: The Complete Code


// App.js
import React, {useState} from 'react';
import {StyleSheet, View, Text, Button, Platform} from 'react-native';

import DateTimePicker from '@react-native-community/datetimepicker';

const App = () => {
  const [isPickerShow, setIsPickerShow] = useState(false);
  const [date, setDate] = useState(new Date(Date.now()));

  const showPicker = () => {
    setIsPickerShow(true);
  };

  const onChange = (event, value) => {
    setDate(value);
    if (Platform.OS === 'android') {
      setIsPickerShow(false);
    }
  };

  return (
    <View style={styles.container}>
      {/* Display the selected date */}
      <View style={styles.pickedDateContainer}>
        <Text style={styles.pickedDate}>{date.toUTCString()}</Text>
      </View>

      {/* The button that used to trigger the date picker */}
      {!isPickerShow && (
        <View style={styles.btnContainer}>
          <Button title="Show Picker" color="#9AD54B" onPress={showPicker} />
        </View>
      )}

      {/* The date picker */}
      {isPickerShow && (
        <DateTimePicker
          value={date}
          mode={'date'}
          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
          is24Hour={true}
          onChange={onChange}
          style={styles.datePicker}
        />
      )}
    </View>
  );
};

// just add some styles to make our app look more beautiful
// This is not the focus of this article
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    padding: 50,
  },
  pickedDateContainer: {
    padding: 20,
    backgroundColor: '#E0F01F',
    borderRadius: 10,
  },
  pickedDate: {
    fontSize: 18,
    color: '#1F0FE0',
  },
  btnContainer: {
    padding: 30,
  },
  // This only works on iOS
  datePicker: {
    width: 320,
    height: 260,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
});

export default App;

Step 6: Conclusion


In this article, we went over how to create a Date and Time Picker in React Native by using the react-native-datetimepicker / datetimepicker module. If you’d like to learn more about React Native, check out our React Native topic page for more tutorials and examples.

How to Implement a Picker in React Native (2021)

In this post, we are going to look into building a picker system using @react-native-picker/picker package.

Earlier days, the react-native core component used to support a built-in Picker component, but it is now deprecated, and you should no longer import it into your code.

We are going to look into a new way to use the picker component using this component which is available in github repo.




Lets get started


Step 1. Installation


For Expo Projects:


If you are using Expo then just execute the command below to install the package:

expo install @react-native-picker/picker



For non-expo projects:


npm i @react-native-picker/picker


If you are developing an app for iOS, you need to perform an extra command:

npx pod-install


Step 2 : Example

Preview

The demo we are going to build has a picker that lets a user select their gender. When  gender is selected, its name will be displayed in the Text component right below the picker.

Here’s how it works.


react-native-dropdown-picker



Step 3 : Adding the picker to App.js

To Add a picker



To add a picker of type dropdown . you can set the mode to dropdown . The supported types are 'dialog', 'dropdown'. Add the below code to App.js

<Picker
        selectedValue={gender}
        onValueChange={(value, index) => setGender(value)}
        mode="dropdown" // Android only
        style={styles.picker}
      >


Add some style to the picker



const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: '#F2F5FB'
  },
  headertext:{
    fontSize:20,
    color: '#000'
  },
  text: {
    fontSize: 16,
    color: '#000'
  },
  picker: {
    marginVertical: 30,
    width: 300,
    padding: 10,
    borderWidth: 1,
    borderColor: "#fff",
    color:"#000"
  },
});


The Code 

This is the complete code for the example(App.js):

// App.js
import "react-native-gesture-handler";

import React, { useState } from "react";
import { View, Text, StyleSheet } from "react-native";

import { Picker } from "@react-native-picker/picker";

function App() {
  const [gender, setGender] = useState('Unknown');

  return (
    <View style={styles.screen}>
      <Text style={styles.headertext}>A Picker Demo by NintyZeros.com</Text>


      <Picker
        selectedValue={gender}
        onValueChange={(value, index) => setGender(value)}
        mode="dropdown" // Android only
        style={styles.picker}
      >
        <Picker.Item label="Select Gender" value="Unknown" />
        <Picker.Item label="Male" value="Male" />
        <Picker.Item label="Female" value="Female" />
        <Picker.Item label="Not Willing" value="NA" />
      </Picker>
      <Text style={styles.text}>You Selected: {gender}</Text>
    </View>
  );
}

export default App;

// Just some styles
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: '#F2F5FB'
  },
  headertext:{
    fontSize:20,
    color: '#000'
  },
  text: {
    fontSize: 16,
    color: '#000'
  },
  picker: {
    marginVertical: 30,
    width: 300,
    padding: 10,
    borderWidth: 1,
    borderColor: "#fff",
    color:"#000"
  },
});


Common Props 


The table below lists the most used props of the Picker component:

NamePlatformDescription
onValueChangeAndroid, iOSThe callback function that fired when an item is selected
selectedValueAndroid, iOSValue matching value of one of the items (string, integer)
styleAndroid, iOSUsed for styling the picker
testIDAndroid, iOSUsed for testing
enabledAndroidWhether the picker is enabled or disabled
modeAndroid“dialog” or “dropdown”

Conclusion


We’ve covered the basics of implementing a picker, a common element that might appear a lot of times in many mobile apps. If you’d like to learn more about modern React Native, take a look at the following articles.
 


Add Full Screen Background Image in React Native (Expo)

 In this post, we are going to learn about the simpler way to add a full background image to your react native application.


This code will be build using the expo app. it is a free open source toolchain to develop React Native programs for iOS, Android, and Web.


Sometimes we need to display a fullscreen background image in React native app; it is usually required for developing splash screens.




Step 1:  Import ImageBackground Component



We need to import a few more components to add style, image, text, and view. So, also import the couple of more components:

import { ImageBackground } from 'react-native'
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  Modal,
  Alert,
  SafeAreaView
} from 'react-native';
Add some template code to try this out

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
        <View style={styles.container}>
          <Text style={styles.title}>
             React Native Background Image Example
          </Text>
        </View>
    </SafeAreaView>
  );
};

export default App;
Next up propel the ImageBackground component within the defined above code, it implied the static image resource has been evoked.

<ImageBackground 
    source={require('image-url-goes-here')}
    style={{width: 200, height: 200}} 
/>
But for the example, we are using the third-party url and observing how to pass the network requests for images within the ImageBackground component.

<ImageBackground
style={{flex: 1}}
source={{
    uri:
    'https://www.nintyzeros.com/designers/subtlepatterns/patterns/Amrican-pie.png',
}}>

Using ImageBackground in React Native


const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ImageBackground
        style={{flex: 1}}
        source={{
          uri:
            'https://www.nintyzeros.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png',
        }}>
        <View style={styles.container}>
          <Text style={styles.title}>
             React Native Background Image Example
          </Text>
          <View style={styles.contentCenter}>
            <Image
              source={{
                uri:
                  'https://nintyzeros.com/media/9oHZQ2gEez8ti/giphy.gif',
              }}
              style={{
                width: 60,
                height: 60,
                marginTop: 100
              }}
            />
            <Text style={styles.textStyle}>
              The Big Bang Theory
            </Text>
          </View>
        </View>
      </ImageBackground>
    </SafeAreaView>
  );
};
export default App;

To make the style more adaptable add some stylesheets.

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  title: {
    fontSize: 25,
    padding: 15,
    color: 'white',
    fontWeight: 'bold',    
    textAlign: 'center',    
  },
  contentCenter: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  textStyle: {
    color: 'white',
    padding: 10,
  }
});

Full code :


Add the Below code in App.js and run the code in emulator or an android device.

import React from 'react';

import {
  View,
  Text,
  Image,
  StyleSheet,
  SafeAreaView,
  ImageBackground,
} from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ImageBackground
        style={{flex: 1}}
        source={{
          uri:
            'https://www.ninty.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png',
        }}>
        <View style={styles.container}>
          <Text style={styles.title}>
             React Native Background Image Example
          </Text>
          <View style={styles.contentCenter}>
            <Image
              source={{
                uri:
                  'https://media4.giphy.com/media/9oHZQ2gEez8ti/giphy.gif',
              }}
              style={{
                width: 60,
                height: 60,
                marginTop: 100
              }}
            />
            <Text style={styles.textStyle}>
              The Big Bang Theory
            </Text>
          </View>
        </View>
      </ImageBackground>
    </SafeAreaView>
  );
};
export default App;
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  title: {
    fontSize: 25,
    padding: 15,
    color: 'white',
    fontWeight: 'bold',    
    textAlign: 'center',    
  },
  contentCenter: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  textStyle: {
    color: 'white',
    padding: 10,
  }
});

React Native - Environment Setup (Beyond corporate proxy/VPN)

Last week I was trying to set up react native installation on my work laptop to find it doesn't work starightway.I had to spend 3 hrs before finding the right settings to run the app on the emulator. In this post, we are going to see the steps needed to get a basic installation/setup of react-native (even if you work behind corporate proxy/VPN).

These are the tools we need in a development environment (Windows):

  • Visual Studio Code (you can use any other favorite editor or IDE)
  • Android Studio
  • A built-in emulator in Android Studio
  • Node Package Manager (NPM)
  • Node.js (version 8 or newer)
  • React Native command line interface (React Native CLI)
  • Java Development Kit (JDK 8 or newer).



Step 1: Install Node

Step 2: Setup Java (Install JDK)

Download and install the latest version of Java SDK from http://www.oracle.com/technetwork/pt/java/javase/downloads/jdk8-downloads-2133151.html.

Step 3: Install Android Studio

The Android Studio installs the latest Android SDK by default and React Native requires Android 6.0 (Marshmallow) SDK or higher.
Once installed you can go to Tools > SDK Manager and choose any version above 6.0.



If you didn’t have any project yet (our case), you should go to Configure > SDK Manager:
Now, go to the SDK Tools tab and choose these options below:





You will need the Intel x86 Emulator Accelerator (HAXM installer) to run the emulator on Windows. For more information, please refer to the following link:

If you have Hyper-V feature enabled, you need to disable it (I know…)

Step 4:Configure Environment variables:

You may need to add Environment variables to make your life easier and the setup works properly.
Add the ANDROID_HOME variable: This would be the path of your installed SDK
Add JAVA_HOME variable: This would be the path of your installed JDK
  • Make sure you add on Path variable the path for Java SDK and Android platform-tools:
  • C:\Users\{your_user_name}\AppData\Local\Android\Sdk\platform-tools
  • C:\Program Files\Java\jdk1.8.0_181\bin


Step 5: Install React Native CLI

npm install -g react-native-cli

You can create the project by running the below command. react-native init myFirstProject


Step 6: Running the Emulator

Click on AVD Manager and create a new Virtual Device (if you don't have one else run the already created one).




Step 7: Setting if you are behind a corporate proxy.

Get the proxy setting :

You should know the Proxy IPs and port and if authentication is required.

Navigate to File -> Settings -> HTTP Proxy -> Add the hostname /proxy and if authentication required.




Run the emulator:





Click on the three Dots ->Settings ->




This setting will allow the proxy to be inherited from Android Studio.

Step 8: Run the React-Native CLI project

react-native run-android



But if you are behind a proxy this will not load up tp set this up Press Ctrl+M -> Settings





You should see this page. now click on Debug Server host & port device and type 127.0.0.1:8081 and reload the app and it should now work fine.

You can now continue with developing the react native apps.


Android Sliding Menu using Navigation Drawer in Flutter[Tutorial+Example]

Introduction:

You might have noticed that a lot of android applications introduced a sliding panel menu to navigate between major modules of the application. In flutter, you can use the drawer widget to attain the navigation drawer with sliding menus. Most of the time Sliding Menu (Navigation Drawer) will be hidden and can be shown by swiping the screen from left edge to right or tapping the app icon on the app bar.

In this post, We are going to design and implement a navigation drawer using a drawer widget in a flutter to learn more about it you can view the below .




Demo:

The final result of the app

Prerequisites

This tutorial assumes a little knowledge of Flutter and its widget usages.

Visual Studio Code editor / Android studio installed on your machine if you haven’t yet. We’ll use it in our tutorial.


Project Setup:

Create a new flutter project with the name flutter_navigation_drawer. We are going to take an example from Gmail App for the navigation drawer.


Using Material Design, there are two primary options for navigation: tabs and drawers. When there is insufficient space to support tabs, drawers provide a handy alternative.

In Flutter, use the Drawer widget in combination with a Scaffold to create a layout with a Material Design drawer. This recipe uses the following steps:


  • Create a Scaffold.
  • Add a drawer.
  • Populate the drawer with items + close it.


1. Create a Scaffold

To add a drawer you need to wrap it in a Scaffold widget. you can view it in below example:


Scaffold(
  drawer: // Add a Drawer here in the next step.
);
2. Add a drawer 
 Next we are going to add the drawer widget to the scaffold. you can view it in below example:

Scaffold(
  drawer: Drawer(
    child: // Populate the Drawer in the next step.
  )
);
3. Update your main.dart 

We are going to design a new widget for the drawer part. Create a file named maindrawer.dart inside lib directory and we going to look the example little later but before that we will try to update our main.dart file add the below code.

import 'package:flutter/material.dart';

import 'maindrawer.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(
            color: Colors.black
        ),
        title: Text("Gmail",style: TextStyle(color: Colors.red,fontSize: 22.0),),
        backgroundColor: Colors.white,
      ),
      //Now we are going to open a new file
      // where we will create the layout of the Drawer
      drawer: Drawer(
        child: MainDrawer(),
      ),
    );
  }
}
3. Populate drawer with items 

Before we populate with a list view we are going to add a container that will hold the text and the list view todo this we are going to add 

crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
"Gmail",
style:TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.w500,
color: Colors.red[300],
),
//textAlign: TextAlign.left,
),

],
Add the list view by using the ListTile widget that will include the options like inbox.mail,snoozed etc and we are going to use the icon to add the icon and text to the list view as below

ListTile(
onTap: (){},//add code to set state on click of the items
leading: Icon(
Icons.inbox, // add the icons to the ListTile
color: Colors.black,
),
trailing: Text( // trailling is addded to last part of the listview
"99+"
),
title:Text(
"Inbox"
),
The Complete Code to populate the drawer with data . Add this code to the maindrawer.dart

import 'package:flutter/material.dart';

class MainDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          child: Padding(
            padding: EdgeInsets.only(top:50.0,left: 20.0),

            child: Column(
              //mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Text(
                  "Gmail",
                    style:TextStyle(
                        fontSize: 25.0,
                        fontWeight: FontWeight.w500,
                        color: Colors.red[300],
                    ),
                  //textAlign: TextAlign.left,
                ),

              ],
            ),

          ),

        ),
        SizedBox(
          height: 20.0,
        ),
        ListTile(
          onTap: (){},
          leading: Icon(
            Icons.inbox,
            color: Colors.black,
          ),
          trailing: Text(
            "99+"
          ),
          title:Text(
            "Inbox"
          ),

        ),
        ListTile(
          onTap: (){},
          leading: Icon(
            Icons.star_border,
            color: Colors.black,
          ),
          title:Text(
              "Starred"
          ),

        ),
        ListTile(
          onTap: (){},
          leading: Icon(
            Icons.snooze,
            color: Colors.black,
          ),
          title:Text(
              "Snoozed"
          ),

        ),ListTile(
          onTap: (){},
          leading: Icon(
            Icons.label_important,
            color: Colors.black,
          ),
          title:Text(
              "Important"
          ),

        ),ListTile(
          onTap: (){},
          leading: Icon(
            Icons.inbox,
            color: Colors.black,
          ),
          title:Text(
              "draft"
          ),

        ),ListTile(
          onTap: (){},
          leading: Icon(
            Icons.inbox,
            color: Colors.black,
          ),
          title:Text(
              "sent"
          ),

        )
      ],
    );
  }
}
Conclusion:

 We learned how to use the drawer widget within flutter and implement it within your app. we can improve this code by creating a function for the list and just using the reference to add the list items based on title and icons and parameters. We will code those in the next part when we implement the ontap() method till then Happy Coding :-)


Learn to design a beautiful Login/Signup (registration flow) in Flutter

 Introduction:

In this post, we are going to learn how to build a beautiful login/signup (registration flow)for your app. We are going to build it from scratch and understand various widgets that you can use to build an elegant screen. You might have already seen some beautiful screens been designed using flutter. Flutter gives you the flexibility to design your own custom widgets and import them to build sleek designs.

Demo

The final result of the app



Prerequisites

This tutorial assumes a little knowledge of Flutter or Dart. JavaScript knowledge will be helpful as well, especially ES6 features. You should have:

Visual Studio Code editor / Android studio installed on your machine if you haven’t yet. We’ll use it in our tutorial.


Project setup

Simply create a new project in flutter and give it the name flutter_login_app.


Directory structure

Once the project is created, open it into Android Studio. We’re using Android studio because it has the most complete Flutter support (Dart syntax, code completion, debugging tools). By default, you should see the following directory structure:

  1. android - where Android-related files are stored. If you’ve done any sort of cross-platform mobile app development before, this, along with the ios folder should be pretty familiar.
  2. ios - where iOS-related files are stored.
  3. lib - This is where you’ll be working most of the time. By default, it contains a main. dart file, this is the entry point file of the Flutter app. we are going to create our own widget for login/signup here.
  4. test - this is where you put the unit testing code for the app. We won’t really be working on it in this tutorial.
  5. pubspec.yaml - this file defines the version and build number of your app. It’s also where you define your dependencies. If you’re coming from a web development background, this file has the same job description as the package.json file so you can define the external packages (from the Dart packages website) you want to use in here.

Note that I’ve skipped on other folders and files because most of the time you won’t really need to touch them.


First, we will start by creating a new widget file which we will use in the later stages.

Create two dart named login.dart and signup.dart files under the lib folder as seen in the below pics.


Build the UI.

Let start by looking into the main.dart file

Create a new stateless widget class called HomePage.

  • Stateful widget: manages its own internal state and keeps track of it.
  • Stateless widget: while this kind of widget doesn’t. For example, a button doesn’t need to track anything.

We want to have a title with some text, then we have an image or illustration below that we have two buttons more specific Material button widget for login and signup.

To have the flexibility we are going to use the SafeArea widget along with Media queries. Add the below code to get the initial text Hello There!




body: SafeArea(
        child: Container(
          width: double.infinity,
          height: MediaQuery.of(context).size.height,
          padding: EdgeInsets.symmetric(horizontal: 30,vertical: 30),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    "Hello There!",
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 40),
                  ),
                  SizedBox(height: 30,),
                  Text("Automatic identity verification which enable you to verify your identity",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.grey[700],
                        fontSize: 15
                      ),
                  ),
                ],
              ),
Next, we are going to add an illustration to our home page ,First, we need to add the assets to pubspec.yaml file Make sure to follow the YAML structure.

assets:
    - assets/Illustration.png 
    
 
We are going to add the illustration inside a container with a height of 1/3 of the screen size inside a media query.

Container(
                height: MediaQuery.of(context).size.height/3,
                decoration: BoxDecoration(
                  image:DecorationImage(image: AssetImage('assets/Illustration.png'))
                ),
              ),
              
  
Next to add two buttons for login/signup. We are going to use the MaterialButton widget with an onpressed() event which we will cover later on how to have the click functionality for a button. To add a material button you can use the below code for the login and signup button: 

Login Button

MaterialButton(
                    minWidth: double.infinity,
                    height:60,
                    onPressed: (){
                      
                    },
                    color: Colors.indigoAccent[400],
                    shape: RoundedRectangleBorder(
                      side: BorderSide(
                        color: Colors.black,
                      ),
                      borderRadius: BorderRadius.circular(40)
                    ),
                    child: Text("Login",style: TextStyle(
                      fontWeight: FontWeight.w600,fontSize: 16,color: Colors.white70

                    ),),

 
Sign up Button

MaterialButton(
                      minWidth: double.infinity,
                      height:60,
                      onPressed: (){
                        
                      },
                      color: Colors.redAccent,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(40)
                      ),
                      child: Text("Sign UP",style: TextStyle(
                        fontWeight: FontWeight.w600,fontSize: 16,

                      ),),
                    ),	
   


Designing the Login/Sign Up page We are going to design our login and signup page to do that we need to edit our already created login.dart and signup.dart file

Add the below code for login.dart file



import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
        backgroundColor: Colors.white,
        appBar: AppBar(
          elevation: 0,
          brightness: Brightness.light,
          backgroundColor: Colors.white,
          leading:
          IconButton( onPressed: (){
            Navigator.pop(context);
          },icon:Icon(Icons.arrow_back_ios,size: 20,color: Colors.black,)),
        ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Column(
              children: [
                Column(
                  children: [
                    Text ("Login", style: TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.bold,
                    ),),
                    SizedBox(height: 20,),
                    Text("Welcome back ! Login with your credentials",style: TextStyle(
                      fontSize: 15,
                      color: Colors.grey[700],
                    ),),
                    SizedBox(height: 30,)
                  ],
                ),
                Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: 40
                  ),
                  child: Column(
                    children: [
                      makeInput(label: "Email"),
                      makeInput(label: "Password",obsureText: true),
                    ],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 40),
                  child: Container(
                    padding: EdgeInsets.only(top: 3,left: 3),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(40),
                        border: Border(
                            bottom: BorderSide(color: Colors.black),
                            top: BorderSide(color: Colors.black),
                            right: BorderSide(color: Colors.black),
                            left: BorderSide(color: Colors.black)
                        )
                    ),
                    child: MaterialButton(
                      minWidth: double.infinity,
                      height:60,
                      onPressed: (){},
                      color: Colors.indigoAccent[400],
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(40)
                      ),
                      child: Text("Login",style: TextStyle(
                        fontWeight: FontWeight.w600,fontSize: 16,color: Colors.white70
                      ),),
                    ),
                  ),
                ),
                SizedBox(height: 20,),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text("Dont have an account?"),
                    Text("Sign Up",style: TextStyle(
                      fontWeight: FontWeight.w600,
                      fontSize: 18
                    ),),
                  ],
                )
              ],

            ),
          ],
        ),
      ),
    );
  }
}

Widget makeInput({label,obsureText = false}){
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(label,style:TextStyle(
        fontSize: 15,
        fontWeight: FontWeight.w400,
        color: Colors.black87
      ),),
      SizedBox(height: 5,),
      TextField(
        obscureText: obsureText,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.symmetric(vertical: 0,horizontal: 10),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.grey[400],
            ),
          ),
          border: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.grey[400])
          ),
        ),
      ),
      SizedBox(height: 30,)

    ],
  );
}


Add the below code to signup.dart file

import 'package:flutter/material.dart';

class SignupPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      resizeToAvoidBottomPadding: false,
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 0,
        brightness: Brightness.light,
        backgroundColor: Colors.white,
        leading:
        IconButton( onPressed: (){
          Navigator.pop(context);
        },icon:Icon(Icons.arrow_back_ios,size: 20,color: Colors.black,)),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            height: MediaQuery.of(context).size.height,
            width: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text ("Sign up", style: TextStyle(
                          fontSize: 30,
                          fontWeight: FontWeight.bold,
                        ),),
                        SizedBox(height: 20,),
                        Text("Create an Account,Its free",style: TextStyle(
                          fontSize: 15,
                          color: Colors.grey[700],
                        ),),
                        SizedBox(height: 30,)
                      ],
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(
                          horizontal: 40
                      ),
                      child: Column(
                        children: [
                          makeInput(label: "Email"),
                          makeInput(label: "Password",obsureText: true),
                          makeInput(label: "Confirm Pasword",obsureText: true)
                        ],
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 40),
                      child: Container(
                        padding: EdgeInsets.only(top: 3,left: 3),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(40),
                            border: Border(
                                bottom: BorderSide(color: Colors.black),
                                top: BorderSide(color: Colors.black),
                                right: BorderSide(color: Colors.black),
                                left: BorderSide(color: Colors.black)
                            )
                        ),
                        child: MaterialButton(
                          minWidth: double.infinity,
                          height:60,
                          onPressed: (){},
                          color: Colors.redAccent,
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(40)
                          ),
                          child: Text("Sign Up",style: TextStyle(
                            fontWeight: FontWeight.w600,fontSize: 16,

                          ),),
                        ),
                      ),
                    ),
                    SizedBox(height: 20,),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text("Already have an account? "),
                        Text("Login",style: TextStyle(
                            fontWeight: FontWeight.w600,
                            fontSize: 18
                        ),),
                      ],
                    )
                  ],

                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Widget makeInput({label,obsureText = false}){
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(label,style:TextStyle(
          fontSize: 15,
          fontWeight: FontWeight.w400,
          color: Colors.black87
      ),),
      SizedBox(height: 5,),
      TextField(
        obscureText: obsureText,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.symmetric(vertical: 0,horizontal: 10),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.grey[400],
            ),
          ),
          border: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.grey[400])
          ),
        ),
      ),
      SizedBox(height: 30,)

    ],
  );
}

Conclusion:
This is a very simple Flutter Application, demonstrating the Login or Sign-in screen.  Most of the widgets used like Text and FlatButton are surrounded in Container widgets. You may change the colors, padding, margin or backgrounds, to suit the theme of your application. In the next tutorial we are going to develop api using node.js to test the application.

Cheers!
Happy Coding 😀

How to create a Simple TabBar with Tabbarview in Flutter

In this post, we are going to see how to build a simple TabBar in Flutter. We will start with a very basic view to add a tab bar first within an AppBar. We will also see how to add icons and other customizations to a TabBar in a flutter.

Lets get started!

Step 1: Create a project in a flutter in android studio

First Go to your android studio/VS code and create a new flutter app and give the name as flutter_tabs with other default settings.

Step 2: Working with Main.dart

Since you already know that Flutter workes mostly by adding widget and when you run the main dart file the execution of your app starts.

Just give a try to run the app to make sure everything works fine.

To create a TabBar we need to create three things

  • Create a TabController.
  • Create the tabs.
  • Create content for each tab.


Step 3: Add a Stateless Widget to the Main.dart File and give the class name as TabBarDemo

 class TabBardemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
Step 3.1 Update the Main() Method to execute the widget

void main() {
  runApp(TabBarDemo());
}
Step 4: Adding a TabController 

 Now we can go-ahead and add a TabController. To Make sure the view and the tabs are in sync we are going to use this TabController .You can create a TabController manually or automatically by using the DefaultTabController To add a default Tab Controller you can add the below code in you MaterialApp Widget.

home: DefaultTabController(
        length: 3,
        child: Scaffold())
Step 4.1: Create a Tab

 When a tab is selected, it needs to display content. You can create tabs using the TabBar widget. In this example, create a TabBar with three Tab widgets and place it within an AppBar.

home: DefaultTabController(
        length: 3,
        child: Scaffold(
          backgroundColor: Colors.blueGrey[50],
          appBar: AppBar(
            title: new Text("Simple Tab Demo"),
            backgroundColor: Colors.lightBlue[900],
            bottom: TabBar(
              tabs: [
                Tab(
                   text: ("One"),
                ),
                Tab(
                  text: ("Two"),
                ),
                Tab(
					text: ("Three"),
				)
              ],
            ),
          ),
        ),
      ),

Step 4.2: Add a TabView 

 we need to add content to each tab .To add content to we are going to add TabBarView Widget within body

body: TabBarView(children: [
            Center( child: Text("One",style: TextStyle(fontSize: 50),)),
            Center( child: Text("Two",style: TextStyle(fontSize: 50),)),
            Center( child: Text("Three",style: TextStyle(fontSize: 50),))
          ]),


Step 5:
Run the App (main.dart File) 

 Final Code

import 'package:flutter/material.dart';

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

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          backgroundColor: Colors.blueGrey[50],
          appBar: AppBar(
            title: new Text("Simple Tab Demo"),
            backgroundColor: Colors.lightBlue[900],
            bottom: TabBar(
              tabs: [
                Tab(
                   text: ("One"),
                ),
                Tab(
                  text: ("Two"),
                ),
                Tab(text: ("Three"),)
              ],
            ),
          ),
          body: TabBarView(children: [
          Center( child: Text("One",style: TextStyle(fontSize: 50),)),
          Center( child: Text("Two",style: TextStyle(fontSize: 50),)),
          Center( child: Text("Three",style: TextStyle(fontSize: 50),))
        ]),
        ),
      ),
    );
  }
}

class TabBardemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}