Scribd
Upload
4 views7 pages

5 A Program

This document explains the implementation of a Flutter application that demonstrates the use of stateful and stateless widgets. The MyApp widget initializes the app, while MyHomePage, a StatefulWidget, manages a counter that can be incremented through a button. CounterDisplay and CounterButton are StatelessWidgets that display the counter value and provide a button to increment the counter, respectively, updating the UI upon state changes.

Uploaded by

katkuri.saiveena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views7 pages

5 A Program

This document explains the implementation of a Flutter application that demonstrates the use of stateful and stateless widgets. The MyApp widget initializes the app, while MyHomePage, a StatefulWidget, manages a counter that can be incremented through a button. CounterDisplay and CounterButton are StatelessWidgets that display the counter value and provide a button to increment the counter, respectively, updating the UI upon state changes.

Uploaded by

katkuri.saiveena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

5.

a) Learn about stateful and stateless widgets


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stateful and Stateless Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {


@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


int counter = 0;

void incrementCounter() {
setState(() {
counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stateful and Stateless Example'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CounterDisplay(counter),
SizedBox(height: 20),
CounterButton(incrementCounter),
],
),
);
}
}

class CounterDisplay extends StatelessWidget {


final int count;

CounterDisplay(this.count);

@override
Widget build(BuildContext context) {
return Text(
'Counter Value: $count',
style: TextStyle(fontSize: 20),
);
}
}

class CounterButton extends StatelessWidget {


final VoidCallback onPressed;

CounterButton(this.onPressed);

@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
child: Text('Increment Counter'),
);
}
}

When you compile this program in zapp.run,it displays

Output
When you click on increment counter,it displays

Explanation

1. Importing Material Package


dart
CopyEdit
import 'package:flutter/material.dart';

 This line imports the Material Design package from Flutter, which provides ready-to-use
widgets like Scaffold, AppBar, ElevatedButton, and others.
2. Main Function
dart
CopyEdit
void main() {
runApp(MyApp());
}

 The main() function is the entry point of the Flutter application. It runs the app by
calling runApp(), which takes a widget (in this case, MyApp) as an argument and makes it
the root widget of the app.

3. MyApp Class (StatelessWidget)


dart
CopyEdit
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stateful and Stateless Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

 MyApp is a StatelessWidget. A StatelessWidget is a widget that does not depend on


any mutable state.
 In the build() method, the MaterialApp widget is returned. It is a top-level widget that
contains several properties like:
o title: The title of the application (used by the OS).
o theme: The theme for the app, specifying a color scheme (in this case,
Colors.blue).
o home: The home page of the app, which is a MyHomePage() widget.

4. MyHomePage Class (StatefulWidget)


dart
CopyEdit
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
 MyHomePage is a StatefulWidget. This means it has mutable state that can change over
time.
 The createState() method is overridden, which creates and returns the corresponding
state object _MyHomePageState.

5. _MyHomePageState Class
dart
CopyEdit
class _MyHomePageState extends State<MyHomePage> {
int counter = 0;

void incrementCounter() {
setState(() {
counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stateful and Stateless Example'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CounterDisplay(counter),
SizedBox(height: 20),
CounterButton(incrementCounter),
],
),
);
}
}

 _MyHomePageState is the state class associated with MyHomePage.


 It has an integer variable counter initialized to 0 that will keep track of the counter
value.
 incrementCounter() is a method that increments the counter by 1. setState() is
called inside this method, which triggers a re-render of the widget tree whenever the state
changes.
 The build() method is overridden to describe the widget tree. It returns a Scaffold
widget with:
o appBar: An AppBar with the title 'Stateful and Stateless Example'.
o body: A Column widget that arranges its children vertically:
 CounterDisplay(counter): This widget is responsible for displaying the
current value of the counter.
 SizedBox(height: 20): This adds a vertical gap of 20 pixels between
the two widgets.
 CounterButton(incrementCounter): This widget is a button that
increments the counter when pressed.
6. CounterDisplay Class (StatelessWidget)
dart
CopyEdit
class CounterDisplay extends StatelessWidget {
final int count;

CounterDisplay(this.count);

@override
Widget build(BuildContext context) {
return Text(
'Counter Value: $count',
style: TextStyle(fontSize: 20),
);
}
}

 CounterDisplay is a StatelessWidget that takes a parameter count (the counter


value).
 The build() method returns a Text widget that displays the value of the counter
(Counter Value: $count) with a font size of 20.

7. CounterButton Class (StatelessWidget)


dart
CopyEdit
class CounterButton extends StatelessWidget {
final VoidCallback onPressed;

CounterButton(this.onPressed);

@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
child: Text('Increment Counter'),
);
}
}

 CounterButton is another StatelessWidget that takes a VoidCallback function


onPressed as a parameter. VoidCallback is a type for a function that takes no
arguments and returns no value.
 The build() method returns an ElevatedButton widget with:
o onPressed: The function to call when the button is pressed (this will be the
incrementCounter() method from _MyHomePageState).
o child: The button label, 'Increment Counter'.
Summary of How This Works

 The MyApp widget sets up the MaterialApp, and the home page is MyHomePage.
 MyHomePage is a StatefulWidget that maintains a counter variable, which can be
changed by pressing the button.
 CounterDisplay is a StatelessWidget that simply displays the current counter value.
 CounterButton is another StatelessWidget that takes an onPressed callback to
increment the counter.
 When the button is pressed, incrementCounter() is called, which updates the state and
triggers a rebuild of the widget, showing the new counter value.

You might also like