Flutter Basic Language Overview

flutter app development

I am going intro to Flutter is an open-source mobile application development SDK which is created by Google. I am very happy to say that It is used to develop an applications for Android as well as iOS.

Flutter Mobile UI framework for crafting high quality native experiences on iOS as well as Android.

I am going to explain you to quick demo example.

Demonstrate how to implement common mobile design patterns with Flutter.

  • AnimatedList
  • Widget
  • AppBar
  • ExpansionTiles

AnimatedList

Use for AnimatedList is that When an item is added to or removed from the model, the corresponding card animates in or out of view.

Example : Flutter features the following classes – AnimatedListState, AnimatedList.

Widget

Use for Widget is that PreferredSize can appear at the bottom of an AppBar.

Example :  Flutter features the following classes – PreferredSize, TabController, AppBar, TabBarView.

AppBar

Use for AppBar  with a title, actions, and an overflow dropdown menu.

Example : Flutter features the following classes – PopupMenuButton, AppBar, Scaffold, IconButton.

ExpansionTiles

Use for ExpansionTiles can be used to produce two level or multilevel lists.

Example : Flutter features the following classes – ListView, ExpansionTile.

Let’s get I am explain for android UI in Flutter SDK

Flutter for Android Developers

Are you have many question in your mind. How can I build UI in android and how can I implement programming in Flutter so and so question. Don’t worry about this I will provide you quick and easy to way understand all this things.

Views

View contains Buttons, toolbars, and inputs, everything. In Flutter, the rough equivalent to a View is a Widget. In flutter Widgets have a different lifespan – they are immutable and only exist until they need to be changed. Flutter’s framework creates a new tree of widget instances. An Android view is drawn once and does not redraw until invalidate is called.

How do I update Widgets?

Widgets are immutable and are not updated directly, Instead You have to work with the widget’s state.

There are few type of widget

  • StatelessWidgets
  • StatefulWidget

I will explain with example

StatelessWidgets

A common StatelessWidget is the Text widget.

Example as below :

[php]
Text(
‘I am FlutterAppDev’,
style: TextStyle(fontWeight: FontWeight.normal),
);
[/php]

See in the example, the Text Widget has no state information associated with it, it renders what is passed in its constructors and nothing more. But, what if you want to make “I am FlutterAppDev” change dynamically, for example when clicking a FloatingActionButton?

Another Example :

[php]import ‘package:flutter/material.dart’;
void main() {
runApp(SampleApp());
}
class SampleApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Sample Flutter App’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SampleAppPage(),
);
}
}
class SampleAppPage extends StatefulWidget {
SampleAppPage({Key key}) : super(key: key);
@override
_SampleAppPageState createState() => _SampleAppPageState();
}
class _SampleAppPageState extends State {
// Default placeholder text
String textToShow = "I am FlutterAppDev”;
void _updateText() {
setState(() {
// update the text
textToShow = "Flutter is Awesome!";
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample Flutter App"),
),
body: Center(child: Text(textToShow)),
floatingActionButton: FloatingActionButton(
onPressed: _updateText,
tooltip: ‘Update Text’,
child: Icon(Icons.update),
),
);
}
}[/php]

How do I lay out my widgets? Where is my XML layout file?

In Android, you write layouts in XML, but in Flutter you write your layouts with a widget tree.

The following example shows how to display a simple widget with padding:

[php]
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample Flutter App"),
),
body: Center(
child: MaterialButton(
onPressed: () {},
child: Text(‘Hello’),
padding: EdgeInsets.only(left: 10.0, right: 10.0),
),
),
);
}

How do I add or remove a component from my layout?

In Android, you call addChild() or removeChild() on a parent to dynamically add or remove child views. In Flutter, because widgets are immutable there is no direct equivalent to addChild(). Instead, you can pass a function to the parent that returns a widget, and control that child’s creation with a boolean flag.

For example, here is how you can toggle between two widgets when you click on a FloatingActionButton:

<code>import ‘package:flutter/material.dart’;</code>

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

class SampleApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Sample App’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SampleAppPage(),
);
}
}

class SampleAppPage extends StatefulWidget {
SampleAppPage({Key key}) : super(key: key);

@override
_SampleAppPageState createState() =&gt; _SampleAppPageState();
}

class _SampleAppPageState extends State {
// Default value for toggle
bool toggle = true;
void _toggle() {
setState(() {
toggle = !toggle;
});
}

_getToggleChild() {
if (toggle) {
return Text(‘Toggle One’);
} else {
return MaterialButton(onPressed: () {}, child: Text(‘Toggle Two’));
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample App"),
),
body: Center(
child: _getToggleChild(),
),
floatingActionButton: FloatingActionButton(
onPressed: _toggle,
tooltip: ‘Update Text’,
child: Icon(Icons.update),
),
);
}
}
[/php]

How do I use a Canvas to draw/paint?

In Android, you would use the Canvas and Drawables to draw images and shapes to the screen. Flutter has a similar Canvas API as well, since it is based on the same low-level rendering engine, Skia. As a result, painting to a canvas in Flutter is a very familiar task for Android developers.

Flutter has two classes that help you draw to the canvas- CustomPaint and CustomPainter, the latter of which implements your algorithm to draw to the canvas.

[php]
import ‘package:flutter/material.dart’;

void main() =&gt; runApp(MaterialApp(home: DemoApp()));

class DemoApp extends StatelessWidget {
Widget build(BuildContext context) =&gt; Scaffold(body: Signature());
}

class Signature extends StatefulWidget {
SignatureState createState() =&gt; SignatureState();
}

class SignatureState extends State {
List _points = [];
Widget build(BuildContext context) {
return GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
setState(() {
RenderBox referenceBox = context.findRenderObject();
Offset localPosition =
referenceBox.globalToLocal(details.globalPosition);
_points = List.from(_points)..add(localPosition);
});
},
onPanEnd: (DragEndDetails details) =&gt; _points.add(null),
child: CustomPaint(painter: SignaturePainter(_points), size: Size.infinite),
);
}
}

class SignaturePainter extends CustomPainter {
SignaturePainter(this.points);
final List points;
void paint(Canvas canvas, Size size) {
var paint = Paint()
..color = Colors.black
..strokeCap = StrokeCap.round
..strokeWidth = 5.0;
for (int i = 0; i &lt; points.length – 1; i++) { if (points[i] != null &amp;&amp; points[i + 1] != null) canvas.drawLine(points[i], points[i + 1], paint); } } bool shouldRepaint(SignaturePainter other) =&gt; other.points != points;
}
[/php]

I will post next article for more basic concept about Flutter android SDK.

Conclusion:

This is fast learning language and easy way understand this language. You can build UI in Android as well as iOS technologies App. Hurry You can learn this language now.

Leave a Comment

Your email address will not be published.