Flutter (M.P) Practicals

//Practical 1

//Print Something
void main(){
    print("Hello World");
}

//Types of Variables

void main() {
  int num1 = 10;
  double num2 = 10.1;
  bool isTrue = true;
  String str = "Hello World";

  print(num1);
  print(num2);
  print(isTrue);
  print(str);
}


//DIfferent types of Operators

void main() {
  int a = 7;
  int b = 3;

  int c = a + b;
  print(c);
  int d = a - b;
  print(d);

  int e = -d;
  print(e);

  int f = a * b;
  print(f);
  double g = b / a;
  print(g);

  int h = a ~/ b;
  print(h);

  int i = b % a;
  print(i);
}


//Decision making

void main() {
  var marks = 72;
  if (marks > 85) {
    print("Excenllent");
  } else if (marks > 75) {
    print("Very Good");
  } else if (marks > 65) {
    print("Good");
  } else {
    print("Average");
  }
}



//Factorial Function

void main() {
  print(factorial(4));
}

factorial(n) {
  if (n <= 0) {
    return 1;
  }
  return n * factorial(n - 1);
}


//Prime Code

bool isPrime(int n) {
  for (var i = 2; i <= n / i; ++i) {
    if (n % i == 0) {
      return false;
    }
  }
  return true;
}

void main() {
  int n = 45;
  print("Entered number: $n");
  if (isPrime(n)) {
    print("The number is Prime");
  } else {
    print("The Number is not Prime.");
  }
}


//Defining class

class Student {
  var name, age, rno;

  showInfo() {
    print("Student's name is $name.");
    print("Student's age is $age.");
    print("Student's Roll number is $rno.");
  }
}

void main() {
  var std = new Student();
  std.name = "John";
  std.age = 32;
  std.rno = 320;
  std.showInfo();
}









//2. Designing the mobile app to implement different widgets.



import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  TextEditingController controller1 = TextEditingController();
  TextEditingController controller2 = TextEditingController();
  int? num1 = 0, num2 = 0, result = 0;
  add() {
    setState(() {
      num1 = int.parse(controller1.text);
      num2 = int.parse(controller2.text);
      result = num1! + num2!;
    });
  }

  sub() {
    setState(() {
      num1 = int.parse(controller1.text);
      num2 = int.parse(controller2.text);
      result = num1! - num2!;
    });
  }

  mul() {
    setState(() {
      num1 = int.parse(controller1.text);
      num2 = int.parse(controller2.text);
      result = num1! * num2!;
    });
  }

  div() {
    setState(() {
      num1 = int.parse(controller1.text);
      num2 = int.parse(controller2.text);
      result = num1! ~/ num2!;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Calculator'),
        backgroundColor: Colors.blue.shade900,
      ),
      body: Column(
        children: [
          const SizedBox(
            height: 15,
          ),
          Text(
            'Result is: $result',
            style: TextStyle(fontSize: 20, color: Colors.blue.shade700),
          ),
          const SizedBox(
            height: 15,
          ),
          TextField(
            controller: controller1,
            decoration: InputDecoration(
                labelText: "Enter number",
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20))),
          ),
          const SizedBox(
            height: 15,
          ),
          TextField(
            controller: controller2,
            decoration: InputDecoration(
                labelText: "Enter number",
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20))),
          ),
          const SizedBox(
            height: 15,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                  onPressed: () {
                    add();
                    controller1.clear();
                    controller2.clear();
                  },
                  child: const Text('ADD')),
              ElevatedButton(
                  onPressed: () {
                    sub();
                  },
                  child: const Text('SUB'))
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                  onPressed: () {
                    mul();
                  },
                  child: const Text('MUL')),
              ElevatedButton(
                  onPressed: () {
                    div();
                  },
                  child: const Text('DIV')),
            ],
          )
        ],
      ),
    );
  }
}










//3. Designing the mobile app to implement different Layouts.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'My Application',
        debugShowCheckedModeBanner: true,
        home: Scaffold(
            body: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Container(
                          height: 100,
                          width: 100,
                          color: Colors.teal,
                        ),
                        Container(
                            height: 100, width: 100, color: Colors.teal[600]),
                        Container(
                            height: 100, width: 100, color: Colors.teal[900]),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Container(
                          height: 100,
                          width: 100,
                          color: Colors.amberAccent,
                        ),
                        Container(
                            height: 100,
                            width: 100,
                            color: Colors.amberAccent[100]),
                        Container(
                            height: 100,
                            width: 100,
                            color: Colors.amberAccent[200]),
                      ],
                    )
                  ],
                ))));
  }
}










//4. Designing the mobile app to implement the routing.
import 'package:flutter/material.dart';
void main() {
  runApp(const MaterialApp(
    home:MyApp(),
  )); //MaterialApp
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    TextEditingController name = TextEditingController();
    TextEditingController id = TextEditingController();
    TextEditingController semester = TextEditingController();
    TextEditingController dept = TextEditingController();
    TextEditingController city = TextEditingController();
    return Scaffold(
      appBar: AppBar(
        title: const Text("User Info"),
        centerTitle: true,
      ), // AppBar
      body: Column(
        children: [
          const SizedBox(height: 10),
          TextField(
            controller: name,
            decoration: InputDecoration(
                labelText: " Enter your name",
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15)
                ) // OutlineInputBorder
            ), //Input Decoration
          ), // TextField
          const SizedBox(height: 10),
          TextField(
            controller: id,
            decoration: InputDecoration(
                labelText: " Enter your ID",
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15)
                ) // OutlineInputBorder
            ), //Input Decoration
          ), // TextField
          const SizedBox(height: 10),
          TextField(
            controller: semester,
            decoration: InputDecoration(
                labelText: " Enter your Semester",
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15)
                ) // OutlineInputBorder
            ), //Input Decoration
          ), // TextField
          const SizedBox(height: 10),
          TextField(
            controller: dept,
            decoration: InputDecoration(
                labelText: " Enter your Department",
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15)
                ) // OutlineInputBorder
            ), //Input Decoration
          ), // TextField
          const SizedBox(height: 10),
          TextField(
            controller: city,
            decoration: InputDecoration(
                labelText: " Enter your City",
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15)
                ) // OutlineInputBorder
            ), //Input Decoration
          ), // TextField
          const SizedBox(height: 10,),
          ElevatedButton(onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context)=>NextScreen(
              name: name.text,
              id: id.text,
              semester: semester.text,
              dept: dept.text,
              city: city.text,
            ))).whenComplete(() => { //NextScreen, MaterialPageRoute
              name.clear(),
              id.clear(),
              semester.clear(),
              dept.clear(),
              city.clear()
            });
          }, child: const Text("continue")) //ElevatedButton
        ],
      ), //Column
    ); // Scaffold
  }
}
class NextScreen extends StatelessWidget {
  final String? name, id, semester, dept, city;
  const NextScreen({super.key,
    this.name, this.id, this.semester, this.dept, this.city
  });
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text("Name:$name"),
          Text("Id:$id"),
          Text("Semester:$semester"),
          Text("Department:$name"),
          Text("City:$city"),
        ],
      ), //Column
    ); // Scaffold
  }
}





//5. Designing the mobile app to implement the state management.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: HomeScreen(),
  ));
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  TextEditingController name = TextEditingController();
  TextEditingController id = TextEditingController();
  String genderValue = "";
  bool hobby1 = false;
  bool hobby2 = false;
  bool hobby3 = false;
  String strhobby1 = "";
  String strhobby2 = "";
  String strhobby3 = "";
  final formKey = GlobalKey<FormState>(); // formValidation
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("User Info"),
      ),
      body: Form(
        key: formKey,
        child: Column(
          children: [
            const SizedBox(
              height: 10,
            ),
            TextFormField(
              controller: name,
              validator: (value) {
                if (value!.isEmpty) {
                  return 'Please Enter Your Name';
                }
                return null;
              },
              decoration: InputDecoration(
                  labelText: "Enter Your Name",
                  border: OutlineInputBorder(
                      borderRadius:
                          BorderRadius.circular(15)) //OutlineInputBorder
                  ), //InputDecoration
            ), // TextFormField
            const SizedBox(
              height: 10,
            ),
            TextFormField(
              controller: id,
              validator: (value) {
                if (value!.isEmpty) {
                  return 'Please Enter your ID';
                }
                return null;
              },
              decoration: InputDecoration(
                  labelText: "Enter your ID",
                  border: OutlineInputBorder(
                      borderRadius:
                          BorderRadius.circular(15)) //OutLineInputBorder
                  ), //InputDecoration
            ), //TextFormField
            const SizedBox(
              height: 10,
            ),
            RadioListTile(
              value: 'Male',
              groupValue: genderValue,
              onChanged: (val) {
                setState(() {
                  genderValue = val.toString();
                });
              },
              title: const Text("Male"),
            ), // RadioListTitle
            RadioListTile(
              value: 'Female',
              groupValue: genderValue,
              onChanged: (val) {
                setState(() {
                  genderValue = val.toString();
                });
              },
              title: const Text("Female"),
            ), // RadioListTitle
            CheckboxListTile(
              value: hobby1,
              onChanged: (value) {
                setState(() {
                  hobby1 = !hobby1;
                  if (hobby1) {
                    strhobby1 = 'Playing';
                  }
                });
              },
              title: const Text("Playing"),
            ), //checkboxListTile
            CheckboxListTile(
              value: hobby2,
              onChanged: (value) {
                setState(() {
                  hobby2 = !hobby2;
                  if (hobby2) {
                    strhobby2 = 'Singing';
                  }
                });
              },
              title: const Text("Singing"),
            ), //checkboxListTile
            CheckboxListTile(
              value: hobby3,
              onChanged: (value) {
                setState(() {
                  hobby3 = !hobby3;
                  if (hobby3) {
                    strhobby3 = 'Drawing';
                  }
                });
              },
              title: const Text("Drawing"),
            ), //checkboxListTile
            ElevatedButton(
                onPressed: () {
                  if (formKey.currentState!.validate()) {
                    if (genderValue != "") {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => NextScreen(
                                    name: name.text,
                                    id: id.text,
                                    gender: genderValue,
                                    hobbies:
                                        '${strhobby1.toString()},${strhobby2.toString()},${strhobby3.toString()}',
                                  ))); // NextScreen //MaterialPageRoute
                    }
                  }
                },
                child: const Text("Contiue")) // ElevatedButton
          ],
        ), //Column
      ), //Form
    ); //Scaffold
  }
}

class NextScreen extends StatelessWidget {
  final String? name, id, gender, hobbies;
  const NextScreen({this.name, this.id, this.gender, this.hobbies, super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text("Name: $name"),
          Text("Id: $id"),
          Text("Gender: $gender"),
          Text("Hobbies: $hobbies"),
        ],
      ), // Column
    ); //Scaffold
  }
}










//6. Designing the mobile app to implement the theming and styling.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  )); // MaterialApp
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Theming and Styling'),
        ), //AppBar
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Image.network(
                'copy-any-google-image-link',
                height: 250,
                width: 250,
              )
            ],
          ), //Column
        ) // Center
        );
  }
}










//7. Designing the mobile app to implement Gestures.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int numberOfTimesTapped = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text('Tapped ${numberOfTimesTapped}times',
                style: const TextStyle(fontSize: 30)),
            GestureDetector(
              onTap: () {
                setState(() {
                  numberOfTimesTapped++;
                });
              },
              child: Container(
                  padding: const EdgeInsets.all(20),
                  color: Colors.green[200],
                  child: const Text(
                    'TAP HERE',
                    style: TextStyle(fontSize: 30),
                  )),
//Container
            ) //GestureDetector
          ],
        ), // Column
      ), // Center
    ); //Scaffold
  }
}










//8. Designing the mobile app to implement the Animation

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

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  )); // MaterialApp
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
//controller
  late final AnimationController _controller;
  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: const Duration(seconds: 10), vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  bool bookmark = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
            onTap: () {
              if (bookmark == false) {
                bookmark = true;
                _controller.forward();
              } else {
                bookmark = false;
                _controller.reverse();
              }
            },
            child: Lottie.network(
                'https://assets9.lottiefiles.com/packages/lf20_3le10jj4.json',
                controller: _controller)), // GestureDetector
      ), //Center
    ); //Scaffold
  }
}