CSS style in flutter cheatsheet

Text style and alignment

Container with Text

flutter style text and alignment code for above:

var container = Container( // grey box
  child: Text(
    "Conatiner with Text",
    style: TextStyle(
      fontSize: 24,
      fontWeight: FontWeight.w900,
      fontFamily: "Georgia",
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

set background in the flutter

Lorem ipsum
var container = Container( // grey box
  child: Text(
    "Lorem ipsum",
    style: bold24Roboto,
  ),
  width: 320,
  height: 240,
  decoration: BoxDecoration(
    color: Colors.red[400],
  ),
);

Center vertically and horizontally a div or widget in the flutter

Lorem ipsum
var container = Container( // grey box
  child:  Center(
    child:  Text(
      "Lorem ipsum",
      style: bold24Roboto,
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

positioning style in the flutter

position top left
var container = Container( // grey box
  child: Stack(
    children: [
      Positioned( // red box
        child:  Container(
          child: Text(
            "position top left",
            style: bold24Roboto,
          ),
          decoration: BoxDecoration(
            color: Colors.red[400],
          ),
          padding: EdgeInsets.all(16),
        ),
        left: 24,
        top: 24,
      ),
    ],
  ), 
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

what is react or react.js

React.js

React.js is an open-source library for building user Interfaces. It is not a framework and fully focuses on UI responsible for building rich User Interfaces.

Reach has a rich ecosystem and places really well with other libraries to building full fletch applications.

Why learn to react.js?

  • React was created and maintained by facebook
  • Huge community power
  • Easily debugging and solving problems through react community, StackOverflow and so on.
  • It is also a demanding skillset right now for a job.

Features of react.js

  • Component-based Architecture.
  • React is declarative

Component-Based Architecture

Create a component and use it again and again(reusable).

React is declarative

Tell to React what you want and how it looks and the behavior of react components. React will build the actual UI.
React will handle efficiently updating and rendering of the components.
DOM updates are handles gracefully in React.

More on why react.js?

  • Seamless integrate reacts to any of our applications.
  • A portion of your page or a complete page or even an entire application itself.
  • React community creates the brand new React Native for mobile application.

Prerequisites

  • HTML, CSS and Javascript
  • Javascript ES6 added advantage.
  • Node.js packages

I hope this post will helpful for you to understand the React.js. All the best for your work!

what is React Native hybrid application?

Before we see React Native let us understand what is react.js?

React.js is a JavaScript library for building User Interfaces and typically it’s used for web development. Another library which also used for building Web APPs and that is responsible for rendering DOM on to the screen its called a ReactDOM library. ReactDOM.render(‘…’) to adds the web support. ReactDOM.render() also support for the HTML. React itself is platform-agnostic!. That’s all about React.js.

Let dive into the React Native

React Native is a special library that has a collection of special React components. These components are compiled to the native widgets of ios and Android. React Native has Native platform APIs exposed to javascript. React Native tools do connection or bridge from the javascript code to Native platform code. React Native gives full flexibility to connect javascript to native code and it also gives prebuild native features that are conveniently usable into your javascript code.

In the end, React.js + React Native = Real Native mobile APPs (ios, android)

React + React Native App code will typically look like this:

cons App = props =>{
return(
<View>
<Text>Welcome to helperscript.com</Text>
</View>
)
}

<View> and <Text> which is not a normal HTML element because normal HTML elements are not supported in React Native. Views are compiled to real Native widgets.

some similarities of different platform elements

React for Web => <div>, <input> , …
Native Android => android.view , EditText, …
Native ios => UIView, UITextField , …
React Native =><View>, <Text> , …

Note: React Native maps reusable components to the respective platform equivalents.

The workflow of React Native:

React Native workflow

Difference between Expo CLI/Tool Vs React Native CLI

Expo CLI/Tool

  • Third-party service but absolutely free!
  • No need to signUp, No Pay to build
  • Managed App Development
  • lots of convenience and utility features: simplifies development
  • But you are limited to the Expo Ecosystem.
  • It does not have some fine-tune components normally have so that everyone prefer to React Native CLI.
  • Basic components like camera, map and etc are worked well. Your choice is to depend on the features of the application.
  • If you need more control of native you need to move from Expo CLI to React Native CLI.

React Native CLI

  • Manage by React Native community or Team.
  • Bare-bone development which means If you need to develop an android application, then you need to install Android Studio or If you need to build ios you need to install XCode.
  • XCode works only in Mac Os. If you have windows or Linux you only able to run an Android Studio simulator or emulator. For ios, you can use the Expo CLI App in the apple store.
  • Almost no convenience or utility.
  • Full Flexibility of integrating with any Native code which is not in Expo.

How expo app works?

  • The Expo app has the best feature for developers to see the application in real-time on your own real mobile phones.
  • you can publish an app as an EXPO app. You can also publish as standalone apps.
  • you can also switch to a non-EXPO development flow as well.

Let’s get create the first application:

  • Node.js (Install Node.js for Run install React Native).
  • sudo npm install expo-cli –global
  • Type above into your terminal to install react Native. For window type => npm install expo-cli –global.
  • Then create a project using expo init firs-app
  • npm start

Congratulation you are creating your first react-native application. All the best for your work. Thank you for reading. Have a nice day!