Scribd
Upload
28 views

Flutter

flutter code

Uploaded by

sai charan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

Flutter

flutter code

Uploaded by

sai charan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

1A)

import 'dart:html';

import 'package:flutter/material.dart';

void main()
{
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to charan\'s page'),
),
body: Center(child: Column(children: <Widget>[

Container(
margin: EdgeInsets.all(20),
child: FlatButton(
child: Text('Click here'),
color: Colors.redAccent,
textColor: Colors.white,
onPressed: () {},
),
alignment:Alignment.topLeft,
),
]))),
);
}}

Output:
2A)
void main() => runApp(SnackBarDemo());
class SnackBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter SnackBar',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter SnackBar'),
),
body: SnackBarPage(),
),
);
}
}

class SnackBarPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
onPressed: () {
final snackBar = SnackBar(
content: Text('How is it?'),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
// do something
},
),
);
// Find the Scaffold in the Widget tree and use it to show a
SnackBar!
Scaffold.of(context).showSnackBar(snackBar);
},
child: Text('Show SnackBar'),
),
);
}
}

OUTPUT:
3A)

Flutter contains a set of widgets. So that means the whole


application is set to be made out of widgets. A widget describes
what the view of the app would look like in the given state.
Now, as the user interface contains several widgets, those several
widgets are combined to form a widget tree. Now, to each widget
that the user creates, an element is created simultaneously by the
flutter framework, so now these elements when combined will be
called an element tree.
So that means that the widget tree has all the widget configuration
and the element tree has all rendered widgets on the screen.
There is one more tree named render tree, but the user doesn’t
have to interact with it. Render tree is basically a low-level layout,
painting system that inherits from the render objects. You won’t
need to inherit directly to the render tree, and you will be
interacting with the widgets.
Now the widget tree can also be divided into 2 small trees
depending on what widget the user has chosen for their code.
1. Stateless widget tree
2. Stateful widget tree
STATELESS WIDGET AND ELEMENT TREE:
Stateless widget is the widget that is used by the user to create a
non-dynamic application. A stateless widget is formed by a
combination of several small widgets. Each widget that is created
here will have a corresponding stateless element. So several
widgets combined under stateless widgets will be called stateless
widget trees and the corresponding elements will make an
element tree. Flutter uses the create Element method to create the
elements. Each element created will have a unique id assigned by
the flutter back-end.
EX:1
class TextList extends StatelessWidget {
@override
Widget build(BuildContext context){
return Row(
children: <Widget>[
Icon(),
Text(),
],
);
}
}

STATE FULL WIDGET :

A stateful widget is a widget that is used by the user to create a


dynamic application. The stateful widget also works similar to the
stateless widget, but here when the framework calls the create
Element method, a state object is created. The reason behind
creating the state object is that as this has to be a dynamic
application the states would change while keeping the previous
state unharmed and enhancing the performance.
We make use of the set State method to set the new data values
or to update the state objects.
EX: 2
class _TextListState extend State<TextList> {
String note = 'Trip A';
void _onPressed() {
setState( () {
note = 'Trip B';
});
}

@override
Widget build (BuildContext xontext){
return Column(
children : <Widget> [
Icon();
Text('$note),
FlatButton(
onPressed : _onPressed,
),
],
);
}
}

we have created TextListState class that extends the


state TextList. We have used the setState method because we
have to keep the initial state in the element tree even after
changing the state.

You might also like