MAD Practical

All for one
Author - All for one
April 27, 2025
0




https://github.com/Codesmith-23/Flutter23

miscellaneous


 https://github.com/shayan729/f1_merch_pwa.git


Experiment 1: Installation of Flutter with Implementation of "Hello World Flutter"



import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello World')),
        body: Center(child: Text('Hello, World!')),
      ),
    );
  }
}

 

Experiment 2: Implementation of Flutter Stateless Widget



import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  const MyApp ({Key? key}) : super (key: key);

  @override
  Widget build(BuildContext context){
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text("Stateless Widget"),),
      body: Center(
        child: Text("Statelesss widget "),
      )
    ),
  );

  }
}

 

Experiment 3: Implementation of Flutter Stateful Widget (Bank Example)



import "package:flutter/material.dart";

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

class MyApp extends StatelessWidget{
  @override
  Widget build (BuildContext context){

  return MaterialApp(
    home: BankAccount(),
  );
  }
}

class BankAccount extends StatefulWidget{
  @override
  _BankAccountState createState() => _BankAccountState();
  }

class _BankAccountState extends State<BankAccount>{
  double _balance = 1000.0;

  void _deposit(double amount){
    setState(() {
    _balance += amount;
      
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("BAnk DAta"),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Current BAlance : \$${_balance.toStringAsFixed(2)}",
            style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),

            ElevatedButton(onPressed: (){
              _deposit(100.0);
            }, 
            child: Text("Deposit \$100"))
          ]
        ),
      ),
    );
  }

}

 

Experiment 4: Implementation of Flutter Layout using Container / Row / Column



import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Column and rows")),
        body: Column(
          children: [
            Container(color: Colors.green,height: 100, width: double.infinity),
            Row(
              children: [
                Container(color: Colors.amber,height: 100,width: 100),
                Container(color: Colors.redAccent,height: 100,width: 100),
                Container(color: const Color.fromARGB(255, 190, 27, 245),height: 100,width: 100),
                Container(color: const Color.fromARGB(255, 0, 255, 217),height: 100,width: 100),
                Container(color: const Color.fromARGB(255, 214, 7, 255),height: 100,width: 100),
                Container(color: const Color.fromARGB(255, 82, 151, 114),height: 100,width: 100),
              ],
            ),
            Container(color: Colors.lightBlueAccent,height: 100, width: double.infinity),
          ],
        ),

        ),
      );
    
  }
}

 

Experiment 4.2: Implementation of ListView


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("LIST VIew")),
        body: ListView(
          children: [
            ListTile(
              leading: Icon(Icons.star_border_outlined),
              title: Text("Player 1 "),
             
            ),
            ListTile(
              leading: Icon(Icons.star_border_outlined),
              title: Text("Player 2 "),
             
            ),
            ListTile(
              leading: Icon(Icons.star_border_outlined),
              title: Text("Player 3 "),
             
            ),
            ListTile(
              leading: Icon(Icons.star_border_outlined),
              title: Text("Player 4 "),
             
            ),
            ListTile(
              leading: Icon(Icons.star_border_outlined),
              title: Text("Player 5 "),
             
            ),
          ],
        ),
      ),
    );
  }
}



Experiment 5: Implementation of Flutter Form and Validations


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyFormPage(),
    );
  }
}

class MyFormPage extends StatefulWidget {
  @override
  _MyFormPageState createState() => _MyFormPageState();
}

class _MyFormPageState extends State<MyFormPage> {
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Form')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Form(
          key: _formKey, // Assign the form key
          child: Column(
            children: [
              TextFormField(
                controller: _nameController,
                decoration: InputDecoration(labelText: 'Enter your name'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Name cannot be empty';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                child: Text('Submit'),
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // If the form is valid, display a snackbar
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Hello, ${_nameController.text}!')),
                    );
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Experiment 6: Implementation of Flutter Firebase using Realtime Database

Steps to Set Up:

  1. Create a project at Firebase Console.
  2. Add your Android/iOS/Web app to the project.
  3. Download and place google-services.json (for Android) in android/app.
  4. Enable Realtime Database in the Firebase Console.
  5. Add the following dependencies in pubspec.yaml:

dependencies:
  firebase_core: ^2.0.0
  firebase_database: ^10.0.0

Code:


import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_database/firebase_database.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Realtime Demo',
      home: FirebaseRealtimeDemo(),
    );
  }
}

class FirebaseRealtimeDemo extends StatelessWidget {
  final DatabaseReference _dbRef = FirebaseDatabase.instance.ref().child('messages');

  void _sendData() {
    _dbRef.push().set({'message': 'Hello from Realtime DB'});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Realtime DB')),
      body: Center(
        child: ElevatedButton(
          onPressed: _sendData,
          child: Text('Send Message to Firebase'),
        ),
      ),
    );
  }
}

 

MY DB CODE

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase RTDB via HTTP',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AddDataScreen(),
    );
  }
}

class AddDataScreen extends StatefulWidget {
  @override
  _AddDataScreenState createState() => _AddDataScreenState();
}

class _AddDataScreenState extends State<AddDataScreen> {
  final _emailController = TextEditingController();
  final _nameController = TextEditingController();
  final _positionController = TextEditingController();

  // Firebase Realtime Database URL
final String firebaseUrl = 'https://dailyuploads-37220-default-rtdb.asia-southeast1.firebasedatabase.app/employees.json';
 

  // Function to add data to Firebase via HTTP
  Future<void> _addData() async {
  String email = _emailController.text.trim();
  String name = _nameController.text.trim();
  String position = _positionController.text.trim();

  if (email.isNotEmpty && name.isNotEmpty && position.isNotEmpty) {
    try {
      final data = {
        'email': email,
        'name': name,
        'position': position,
      };

      final response = await http.post(
        Uri.parse(firebaseUrl),
        body: json.encode(data),
        headers: {
          'Content-Type': 'application/json', // <-- Always good to set
        },
      );

      if (response.statusCode == 200) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('✅ Data added successfully')),
        );
        _emailController.clear();
        _nameController.clear();
        _positionController.clear();
      } else if (response.statusCode == 404) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('❌ Database not found (404). Check your Firebase URL.')),
        );
      } else if (response.statusCode == 401 || response.statusCode == 403) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('❌ Permission denied. Check your Firebase Database Rules.')),
        );
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('❌ Failed to add data. Status code: ${response.statusCode}')),
        );
      }
    } catch (error) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('⚠️ Unexpected error: $error')),
      );
    }
  } else {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('⚠️ Please fill all fields')),
    );
  }
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add User Data to Firebase'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Enter email'),
            ),
            TextField(
              controller: _nameController,
              decoration: InputDecoration(labelText: 'Enter name'),
            ),
            TextField(
              controller: _positionController,
              decoration: InputDecoration(labelText: 'Enter position'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _addData,
              child: Text('Add Data'),
            ),
          ],
        ),
      ),
    );
  }
}

 

Experiment 7: Implementation of Flutter Firebase using Cloud Firestore

Steps to Set Up:

  1. Follow the same steps as Realtime Database to add Firebase to your app.
  2. Enable Cloud Firestore in the Firebase Console.
  3. Add the following dependencies in pubspec.yaml:

dependencies:
  firebase_core: ^2.0.0
  cloud_firestore: ^4.0.0

Code:


import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firestore Demo',
      home: FirestoreDemo(),
    );
  }
}

class FirestoreDemo extends StatelessWidget {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  void _sendData() {
    _firestore.collection('messages').add({'text': 'Hello from Firestore!'});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Cloud Firestore')),
      body: Center(
        child: ElevatedButton(
          onPressed: _sendData,
          child: Text('Send Message to Firestore'),
        ),
      ),
    );
  }
}

 

Experiment 8: Implementation of Flutter Routing and Gesture

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Routing + Gesture', home: FirstScreen(), ); } } class FirstScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('First Screen')), body: Center( child: GestureDetector( onTap: () { // Navigate to second screen Navigator.push( context, MaterialPageRoute(builder: (context) => SecondScreen()), ); }, child: Container( padding: EdgeInsets.all(20), color: Colors.blue, child: Text( 'Tap to go to Second Screen', style: TextStyle(color: Colors.white), ), ), ), ), ); } } class SecondScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Second Screen')), body: Center(child: Text('You are now on the second screen!')), ); } } 
 

Experiment 9: Implementation of PWA from Web App to Mobile UI


import 'package:flutter/material.dart';

class PWAWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PWA Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(title: Text('Progressive Web App')),
        body: Center(child: Text('This is a PWA Example')),
      ),
    );
  }
}

 

Experiment 10: Implementation of E-commerce Web App to Mobile using PWA Manifest and Service Workers


// index.html
<link rel="manifest" href="manifest.json">
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js');
  }
</script>

// manifest.json
{
  "name": "Flutter E-commerce App",
  "short_name": "E-Shop",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

// service-worker.js
self.addEventListener('install', function(e) {
  console.log('Service Worker: Installed');
});

You may like these posts

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link
To Top