Text Widget displays String objects in the screen. This article intends to discuss various properties of the Text widget. You can find the official documentation here. I will try to explain the properties a little more in addition to the documentation in this article.

A sample of basic Text widget is as follows:

textAlign: Flutter facilitates the alignment of text horizontally inside its parent widget’s boundary using textAlign property.

TextAlign comes with 7 different constants. start, end, left, right, center, justify and values.

TextAlign.start places the text in the leading end of the parent widget’s boundaries. The text…


The SanckBar is a flutter widget that helps you to give the user a notification when certain actions take place. For example, when a user deletes a message or a file or they send an email to somebody, we may need to show a quick message indicating the data is deleted or an email is send. It will be more convenient for the user if we provide an undo option for the same.

The Basic implementation of SnackBar is,

But this may cause error most of the times. The log says this happens because the context that we pass…


Flutter TextField tutorial

TextField in flutter is a widget that helps you to get user inputs from the keyboard. It is similar to the input type “text” in HTML. In this article, we go through various arguments used in a TextField. Let’s create a basic TextField:

new TextField()


Flutter Button and JavaScript Button Comparison

I had developed web apps for time pass from the beginning of my programming journey. I have used HTML, CSS and JavaScript for that For the past one year, I have been using flutter for development. Flutter is a cross-platform SDK developed by google. In this article, I will show you the difference in making a Button in JavaScript and that in Flutter.

The code I used to make in a button in JavaScript and HTML is as follows

<html>
<body>
<div id="mainDiv"></div>…


It’s a bit long ago flutter has released stable version for web. DartPad was initially supported to test only basic dart code. It is now possible to test Flutter on DartPad and develop applications with Flutter. All you have to do is:

Go to Dartpad for flutter.

Click on new pad.

Select flutter.

There you go.

You can try whatever UI you want.This is very helpful for developers with low-end systems or who are getting started with Flutter.

Here is how I made the above UI.

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends…


The column is used in Flutter to create a vertical array of widgets. The Column is not scrollable. If you wrap it up with a ListView, it will become scrollable.

The definition of a column is as follows.

Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment =
CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
}) : super(
children: children,
key: key,
direction: Axis.vertical,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
textDirection: textDirection,
verticalDirection: verticalDirection,
textBaseline: textBaseline,
);

Let’s see how would we implement it.

This is a basic column…


RaisedButton is one of the most widely used widget in the flutter material library. It is actually a simple button which can handle normal click event. But what make it so great is its easiness of development. Lets look into the basic RaisedButton:

new RaisedButton(  onPressed: () => print("Button Pressed"),  child: new Text("Press here"),),


Flutter Logo

Flutter mobile uses the stable channel for building the app. But if you have to compile the code you built for web you need to switch the channel to master. If you are developing two projects, one for mobile and the other for web, you may easily get frustrated each time you switch the channel.

Switching between the channels cost a lot of time of development if the developer have to do it frequently. Even though the solution proposed here is not that professional but it does the job.

  1. All you have to do is to create a copy of…

ANEESH JOSE

Flutter enthusiast | Dart | Android app Developer | Web | Firebase | Node

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store