Flutter Exampe 1st:
1) Print Welcome message:-
Create MyTextPage.dart file
import 'package:flutter/material.dart';
class MyTextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("Text Widget Example")
),
body: Center(
child:Text("Welcome to SHIVA CONCEPT",style: TextStyle(fontSize: 35,
color: Colors.purple,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.italic,
letterSpacing: 8,
wordSpacing: 20,
backgroundColor: Colors.yellow,
shadows: [
Shadow(color: Colors.blueAccent, offset: Offset(2,1), blurRadius:10)
] ))
),
);
}
}
Code of Main.dart
import 'package:flutter/material.dart';
import 'MyTextPage.dartt';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home:MyTextPage(),
);
}
}
Example 2nd:-
Create simple interest App in Flutter
import 'package:flutter/material.dart';
class SICalc extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sum Program',
home: Scaffold(
appBar: AppBar(title: const Text("Sum Program")),
body: const SICALCWidget(),
),
);
}
}
class SICALCWidget extends StatefulWidget {
const SICALCWidget({super.key});
@override
State<SICALCWidget> createState() => _SIWidgetState();
}
class _SIWidgetState extends State<SICALCWidget> {
TextEditingController p = TextEditingController();
TextEditingController r = TextEditingController();
TextEditingController t = TextEditingController();
String result = '';
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(15),
child: TextField(
controller: p,
keyboardType: TextInputType.number,
decoration: const InputDecoration(labelText: "Enter P"),
),
),
Padding(
padding: const EdgeInsets.all(15),
child: TextField(
controller: r,
keyboardType: TextInputType.number,
decoration: const InputDecoration(labelText: "Enter R"),
),
),
Padding(
padding: const EdgeInsets.all(15),
child: TextField(
controller: t,
keyboardType: TextInputType.number,
decoration: const InputDecoration(labelText: "Enter T"),
),
),
ElevatedButton(
onPressed: () {
setState(() {
result = (int.parse(p.text) * int.parse(r.text) * int.parse(t.text)/100).toString();
});
},
child: Text('Calculate SI'),
),
Text(result)
],
);
}
}
Example 3: Create SalaryCalculator App in Flutter
import 'package:flutter/material.dart';
void main() {
runApp(SalaryCalculatorApp());
}
class SalaryCalculatorApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Salary Calculator',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SalaryCalculatorScreen(),
);
}
}
class SalaryCalculatorScreen extends StatefulWidget {
@override
_SalaryCalculatorScreenState createState() => _SalaryCalculatorScreenState();
}
class _SalaryCalculatorScreenState extends State<SalaryCalculatorScreen> {
double basicPay = 0;
double ta = 0;
double da = 0;
double comm = 0;
double pf = 0;
double hl = 0;
double refreshValue = 0;
double totalSalary = 0;
void calculateSalary() {
setState(() {
ta = (basicPay * ta) / 30;
da = (basicPay * da) / 30;
comm = (basicPay * comm) / 30;
pf = (basicPay * pf) / 30;
hl = (basicPay * hl) / 30;
totalSalary = basicPay + ta + da + comm - pf - hl;
});
}
void resetFields() {
setState(() {
basicPay = 0;
ta = 0;
da = 0;
comm = 0;
pf = 0;
hl = 0;
totalSalary = 0;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Salary Calculator'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextField(
decoration: InputDecoration(labelText: 'Basic Salary'),
keyboardType: TextInputType.number,
onChanged: (value) {
setState(() {
basicPay = double.tryParse(value) ?? 0;
});
},
),
SizedBox(height: 16.0),
TextField(
decoration: InputDecoration(labelText: 'Ta '),
keyboardType: TextInputType.number,
onChanged: (value) {
setState(() {
ta = double.tryParse(value) ?? 0;
});
},
),
SizedBox(height: 16.0),
TextField(
decoration: InputDecoration(labelText: 'DA Percentage'),
keyboardType: TextInputType.number,
onChanged: (value) {
setState(() {
da = double.tryParse(value) ?? 0;
});
},
),
SizedBox(height: 16.0),
TextField(
decoration: InputDecoration(labelText: 'Comm Percentage'),
keyboardType: TextInputType.number,
onChanged: (value) {
setState(() {
comm = double.tryParse(value) ?? 0;
});
},
),
SizedBox(height: 16.0),
TextField(
decoration: InputDecoration(labelText: 'PF Percentage'),
keyboardType: TextInputType.number,
onChanged: (value) {
setState(() {
pf = double.tryParse(value) ?? 0;
});
},
),
SizedBox(height: 16.0),
TextField(
decoration: InputDecoration(labelText: 'Holidays'),
keyboardType: TextInputType.number,
onChanged: (value) {
setState(() {
hl = double.tryParse(value) ?? 0;
});
},
),
SizedBox(height: 16.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
onPressed: calculateSalary,
child: Text('Calculate Salary'),
),
ElevatedButton(
onPressed: resetFields,
child: Text('Refresh All Fields'),
),
],
),
SizedBox(height: 16.0),
Text(
'Basic Pay: \$${basicPay.toStringAsFixed(2)}',
style: TextStyle(fontSize: 20),
),
Text(
'Ta: \$${ta.toStringAsFixed(2)}',
style: TextStyle(fontSize: 20),
),
Text(
'da: \$${da.toStringAsFixed(2)}',
style: TextStyle(fontSize: 20),
),
Text(
'Comm: \$${comm.toStringAsFixed(2)}',
style: TextStyle(fontSize: 20),
),
Text(
'PF: \$${pf.toStringAsFixed(2)}',
style: TextStyle(fontSize: 20),
),
Text(
'HL: \$${hl.toStringAsFixed(2)}',
style: TextStyle(fontSize: 20),
),
SizedBox(height: 16.0),
Text(
'Total Salary: \$${totalSalary.toStringAsFixed(2)}',
style: TextStyle(fontSize: 20),
),
],
),
),
),
);
}
}
Create Simple Calculator App in Dart:
import 'package:flutter/material.dart';
class Calc extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sum Program',
home: Scaffold(
appBar: AppBar(title: const Text("Sum Program")),
body: const CALCWidget(),
),
);
}
}
class CALCWidget extends StatefulWidget {
const CALCWidget({super.key});
@override
State<CALCWidget> createState() => _CALCWidgetState();
}
class _CALCWidgetState extends State<CALCWidget> {
TextEditingController p = TextEditingController();
String result = '';
int num1=0;
int num2=0;
int num3=0;
String ope='';
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(15),
child: TextField(
controller: p,
keyboardType: TextInputType.number,
decoration: const InputDecoration(labelText: ""),
),
),
ElevatedButton(
onPressed: () {
setState(() {
result += '1';
p.text = result;
});
},
child: Text('1'),
),
ElevatedButton(
onPressed: () {
setState(() {
result += '2';
p.text = result;
});
},
child: Text('2'),
),
ElevatedButton(
onPressed: () {
setState(() {
num1= int.parse(result);
result='';
ope='+';
p.text = result;
});
},
child: Text('+'),
),
ElevatedButton(
onPressed: () {
setState(() {
num2 = int.parse(result);
if(ope=='+')
{
num3=num1+num2;
}
p.text = ''+num3.toString();
});
},
child: Text('='),
),
ElevatedButton(
onPressed: () {
setState(() {
num1=0;
num2=0;
result='';
ope='';
p.text = '';
});
},
child: Text('AC'),
),
Text(''+ num3.toString())
],
);
}
}
Create Chessboard design in Flutter:-
import 'package:flutter/material.dart';
class Chessboard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sum Program',
home: Scaffold(
appBar: AppBar(title: const Text("Sum Program")),
body: const ChessboardWidget(),
),
);
}
}
class ChessboardWidget extends StatefulWidget {
const ChessboardWidget({super.key});
@override
State<ChessboardWidget> createState() => _ChessWidgetState();
}
class _ChessWidgetState extends State<ChessboardWidget> {
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[
Row(
//ROW 1
children: [
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
)
],
),
Row(
//ROW 1
children: [
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
)
],
),
Row(
//ROW 1
children: [
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
)
],
),
Row(
//ROW 1
children: [
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
)
],
),
Row(
//ROW 1
children: [
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
)
],
),
Row(
//ROW 1
children: [
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
)
],
),
Row(
//ROW 1
children: [
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
)
],
),
Row(
//ROW 1
children: [
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.white,
child: FlutterLogo(
size: 42.0,
),
),
Container(
color: Colors.black,
child: FlutterLogo(
size: 42.0,
),
)
],
),
]);
}
}
Checkbox Example in Flutter:
import 'dart:ffi';
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp( home:CheckSbox(),));
}
class CheckSbox extends StatefulWidget {
@override
_CheckSboxState createState() => _CheckSboxState();
}
class _CheckSboxState extends State<CheckSbox> {
bool valuefirst = false;
bool valuesecond = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter Checkbox Example'),),
body: Container(
padding: new EdgeInsets.all(22.0),
child: Column(
children: <Widget>[
SizedBox(width: 10,),
Text('Checkbox with Header and Subtitle',style: TextStyle(fontSize: 20.0), ),
CheckboxListTile(
secondary: const Icon(Icons.alarm),
title: const Text('Ringing at 4:30 AM every day'),
subtitle: Text('Ringing after 12 hours'),
value: this.valuefirst,
onChanged: (bool? value) {
setState(() {
this.valuefirst = value!;
});
},
),
CheckboxListTile(
controlAffinity: ListTileControlAffinity.trailing,
secondary: const Icon(Icons.alarm),
title: const Text('Ringing at 5:00 AM every day'),
subtitle: Text('Ringing after 12 hours'),
value: this.valuesecond,
onChanged: (bool? value) {
setState(() {
this.valuesecond = value!;
});
},
),
],
)
),
),
);
}
}
Checkbox Another Example of course calculator:
import 'package:flutter/material.dart';
class checkBoxPro extends StatefulWidget {
const checkBoxPro({super.key});
@override
State<checkBoxPro> createState() => _checkBoxProState();
}
class _checkBoxProState extends State<checkBoxPro> {
bool valuefirst = false;
bool valuesecond = false;
bool valuethird = false;
bool valuefourth = false;
bool valuefifth = false;
bool valuesixth = false;
final int value1 = 1200;
final int value2 = 2200;
final int value3 = 4100;
final int value4 = 12000;
final int value5 = 15000;
final int value6 = 16000;
int totalSum = 0;
String totalSumText = '';
void updateTotalSum(){
totalSum=0;
if(valuefirst){
totalSum+=value1;
}
if(valuesecond){
totalSum+=value2;
}
if(valuethird){
totalSum+=value3;
}
if(valuefourth){
totalSum+=value4;
}
if(valuefifth){
totalSum+=value5;
}
if(valuesixth){
totalSum+=value6;
}
}
void updateTotalSumText() {
// Update the totalSumText string to display the total sum
setState(() {
totalSumText = 'Total sum of Selected Language: Rs.$totalSum';
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Check Box'),
),
body: Column(
children: [
SizedBox(width: 20,),
CheckboxListTile(
title: const Text('C Programming'),
subtitle: Text('Rs.1200'),
value: this.valuefirst,
onChanged: (bool? value){
setState(() {
this.valuefirst=value!;
updateTotalSum();
});
}
),
CheckboxListTile(
title: const Text('C++'),
subtitle: Text('Rs.2200'),
value: this.valuesecond,
onChanged: (bool? value){
setState(() {
this.valuesecond=value!;
updateTotalSum();
});
}
),
CheckboxListTile(
title: const Text('Java'),
subtitle: Text('Rs.4100'),
value: this.valuethird,
onChanged: (bool? value){
setState(() {
this.valuethird=value!;
updateTotalSum();
});
}
),
CheckboxListTile(
title: const Text('Data Structure'),
subtitle: Text('Rs.12000'),
value: this.valuefourth,
onChanged: (bool? value){
setState(() {
this.valuefourth=value!;
updateTotalSum();
});
}
),
CheckboxListTile(
title: const Text('React Js'),
subtitle: Text('Rs.15000'),
value: this.valuefifth,
onChanged: (bool? value){
setState(() {
this.valuefifth=value!;
updateTotalSum();
});
}
),
CheckboxListTile(
title: const Text('Angular Js'),
subtitle: Text('Rs.16000'),
value: this.valuesixth,
onChanged: (bool? value){
setState(() {
this.valuesixth=value!;
updateTotalSum();
});
}
),
ElevatedButton(
onPressed: () {
updateTotalSum();
updateTotalSumText(); // Update the total sum text when the button is pressed
},
child: Text('Submit'),
),
// Add a Text widget to display the total sum
if (totalSumText.isNotEmpty)
Text(
totalSumText,
style: TextStyle(fontSize: 16),
),
],
),
),
);
}
}
POST Answer of Questions and ASK to Doubt