0% found this document useful (0 votes)
6 views

Flutter Record

The document outlines a comprehensive guide for installing Android Studio and Flutter, creating various applications using Flutter, and implementing fundamental programming concepts in Dart. It covers installation steps, creating a login form, demonstrating user-defined functions, object-oriented programming, basic widgets, layout widgets, gesture detection, and a registration form. Each section includes code examples and explanations for building applications over a span of several weeks.

Uploaded by

Sarilla Shasi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
6 views

Flutter Record

The document outlines a comprehensive guide for installing Android Studio and Flutter, creating various applications using Flutter, and implementing fundamental programming concepts in Dart. It covers installation steps, creating a login form, demonstrating user-defined functions, object-oriented programming, basic widgets, layout widgets, gesture detection, and a registration form. Each section includes code examples and explanations for building applications over a span of several weeks.

Uploaded by

Sarilla Shasi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 30

Week 1

Q. Installation of Android Studio & Flutter.


Part 1: Install Android Studio
1. Download Android Studio
o Visit the Android Studio website.

o Download the latest version for your operating system (Windows, macOS, or Linux).

2. Install Android Studio


o Windows: Run the .exe file and follow the installation wizard.

o macOS: Open the .dmg file, drag Android Studio to Applications, and launch it.

o Linux: Unzip the downloaded file and follow the instructions in the README file.

3. Set up Android Studio


o Launch Android Studio and follow the Setup Wizard.

o Install the necessary SDK tools and Emulator during the setup.

4. Verify Installation
o Open Android Studio, go to File > Settings > Appearance & Behavior > System
Settings > Android SDK.
o Ensure the following are installed:

 Android SDK Platform


 Android SDK Tools
 Android Emulator
 Intel HAXM (if applicable).

Part 2: Install Flutter


1. Download Flutter SDK
o Go to the Flutter website.

o Download the latest Flutter SDK for your operating system.

2. Extract Flutter SDK


o Extract the downloaded file to a location (e.g., C:\flutter for Windows or ~/flutter for
macOS/Linux).
3. Update System Path
o Add the flutter/bin directory to your system's PATH:

 Windows:
1. Open Environment Variables (System Properties > Advanced >
Environment Variables).
2. Edit the Path variable and add C:\flutter\bin.
 macOS/Linux: Add this line to your shell config file (~/.bashrc, ~/.zshrc, or
~/.bash_profile):
bash
export PATH="$PATH:`pwd`/flutter/bin"
Then run:
bash
Copy code
source ~/.bashrc
4. Verify Flutter Installation
o Open a terminal or command prompt and run:

Bash
flutter doctor
o This command checks if all required dependencies are installed.

o Follow the instructions to resolve any issues.

Part 3: Connect Android Studio with Flutter


1. Install Flutter and Dart Plugins
o Open Android Studio.

o Go to File > Settings > Plugins.

o Search for and install the Flutter plugin (this will also install the Dart plugin
automatically).
o Restart Android Studio after installation.

2. Create a New Flutter Project


o Open Android Studio.

o Go to File > New > New Flutter Project.

o Provide the Flutter SDK path when prompted.

3. Run the Flutter App


o Open the main.dart file.

o Connect an emulator or a physical device.

o Click on the Run button (green arrow).


Week 2
Q. Create an application using Flutter to implement a login form.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Login Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: LoginPage(),
);
}
}
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login'),
),
body: Center(
child: LoginForm(),
),
);
}
}
class LoginForm extends StatefulWidget {
@override
_LoginFormState createState() => _LoginFormState();
}
class _LoginFormState extends State<LoginForm> {
final TextEditingController _usernameController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
void _submitForm() {
String username = _usernameController.text;
String password = _passwordController.text;
// Validate username and password (e.g., check against a database)
// For demonstration, just print them
print('Username: $username');
print('Password: $password');
}
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _usernameController,
decoration: InputDecoration(
labelText: 'Username',
border: OutlineInputBorder(),
),
),
SizedBox(height: 20.0),
TextField(
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
obscureText: true,
),
SizedBox(height: 20.0),
ElevatedButton(
onPressed: _submitForm,
child: Text('Login'),
),
],
),
);
}
}
Week3 & Week 4:
Q. Create an application to demonstrate user defined functions using dart.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'User-Defined Functions',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final TextEditingController _firstNumberController = TextEditingController();
final TextEditingController _secondNumberController = TextEditingController();
String _result = '';
// User-defined function to add two numbers
int addNumbers(int num1, int num2) {
return num1 + num2;
}
void _calculateResult() {
int firstNumber = int.parse(_firstNumberController.text);
int secondNumber = int.parse(_secondNumberController.text);
int result = addNumbers(firstNumber, secondNumber);
setState(() {
_result = 'Result: $result';
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('User-Defined Functions'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
controller: _firstNumberController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Enter first number',
),
),
TextField(
controller: _secondNumberController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Enter second number',
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _calculateResult,
child: Text('Calculate'),
),
SizedBox(height: 20),
Text(
_result,
style: TextStyle(fontSize: 24),
),
],
),
),
);
}
}
Week 5
Q. Create an application to implement object oriented programming using dart.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
// MyApp class: the entry point of the Flutter application
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'OOP Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Person Details'),
),
body: PersonDetails(),
),
);
}
}
// Person class: defines the properties and methods of a person
class Person {
String name;
int age;
String occupation;
// Constructor for the Person class
Person({required this.name, required this.age, required this.occupation});
// Method to display person's details
String getDetails() {
return 'Name: $name\nAge: $age\nOccupation: $occupation';
}
}
// PersonDetails class: UI widget to display person details
class PersonDetails extends StatelessWidget {
// Creating an instance of Person
final Person person = Person(name: 'John Doe', age: 28, occupation: 'Software Developer');
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Center(
child: Text(
person.getDetails(),
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
);
}
}
Week 6
Q. Create an application for platform basic widgets (Text, Image, and Icon).
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Platform Basic Widgets Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Basic Widgets Example'),
),
body: WidgetDemo(),
),
);
}
}
class WidgetDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Text Widget
Text(
'Welcome to Flutter!',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
SizedBox(height: 20),
// Image Widget
Image.network(
'https://flutter.dev/assets/homepage/carousel/slide_1-layer_0-
2a11103d9ae8c7d9c2c24726e9e1c739.png',
width: 200,
height: 200,
),
SizedBox(height: 20),
// Icon Widget
Icon(
Icons.thumb_up,
size: 50,
color: Colors.green,
),
],
),
);
}
}
Week 7
Q. Create an application for layout widgets (Single child, Multiple child).
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
void main() {
runApp(LayoutDemoApp());
}
class LayoutDemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Layout Widgets Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: LayoutDemoScreen(),
);
}
}
class LayoutDemoScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Layout Widgets'),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Single-Child Layout Widgets',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
// Single-child layout: Container
Container(
padding: EdgeInsets.all(20),
color: Colors.blue[100],
child: Text(
'This is a Container widget (Single-Child)',
style: TextStyle(fontSize: 18),
),
),
SizedBox(height: 20),
// Single-child layout: Center
Center(
child: Text(
'This text is centered using Center widget',
style: TextStyle(fontSize: 18, color: Colors.blue),
),
),
SizedBox(height: 20),
// Single-child layout: Padding
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'This text has padding using Padding widget',
style: TextStyle(fontSize: 18),
),
),
SizedBox(height: 20),
Text(
'Multi-Child Layout Widgets',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
// Multi-child layout: Row
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
color: Colors.red[200],
child: Text('Item 1'),
),
Container(
padding: EdgeInsets.all(10),
color: Colors.green[200],
child: Text('Item 2'),
),
Container(
padding: EdgeInsets.all(10),
color: Colors.blue[200],
child: Text('Item 3'),
),
],
),
SizedBox(height: 20),
// Multi-child layout: Column
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
color: Colors.purple[200],
child: Text('Column Item 1'),
),
Container(
padding: EdgeInsets.all(10),
color: Colors.orange[200],
child: Text('Column Item 2'),
),
Container(
padding: EdgeInsets.all(10),
color: Colors.yellow[200],
child: Text('Column Item 3'),
),
],
),
SizedBox(height: 20),
// Multi-child layout: ListView
Text(
'Scrollable ListView:',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 100,
color: Colors.red[300],
child: Center(child: Text('List Item 1')),
),
Container(
width: 100,
color: Colors.green[300],
child: Center(child: Text('List Item 2')),
),
Container(
width: 100,
color: Colors.blue[300],
child: Center(child: Text('List Item 3')),
),
Container(
width: 100,
color: Colors.orange[300],
child: Center(child: Text('List Item 4')),
),
],
),
),],),),),); }}
Week 8
Q. Create an application to demonstrate Gesture Detector.
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Gesture Detector Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {


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

class _MyHomePageState extends State<MyHomePage> {


String _gestureDetected = 'No Gesture Detected';

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Gesture Detector Demo'),
),
body: Center(
child: GestureDetector(
onTap: () {
setState(() {
_gestureDetected = 'Tap';
});
},
onDoubleTap: () {
setState(() {
_gestureDetected = 'Double Tap';
});
},
onLongPress: () {
setState(() {
_gestureDetected = 'Long Press';
});
},
onPanUpdate: (details) {
setState(() {
_gestureDetected = 'Pan';
});
},
child: Container(
width: 200,
height: 200,
color: Colors.blueAccent,
child: Center(
child: Text(
_gestureDetected,
style: TextStyle(color: Colors.white, fontSize: 24),
),
),
),
),
),
);
}
}
Week 9 and Week 10
Q. Create an application for Registration Form.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Registration Form Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: RegistrationForm(),
);
}
}
class RegistrationForm extends StatefulWidget {
@override
_RegistrationFormState createState() => _RegistrationFormState();
}
class _RegistrationFormState extends State<RegistrationForm> {
final _formKey = GlobalKey<FormState>();
String _name = '';
String _email = '';
String _password = '';

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Registration Form'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'Name'),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your name';
}
return null;
},
onSaved: (value) {
_name = value!;
},
),
TextFormField(
decoration: InputDecoration(labelText: 'Email'),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your email';
}
return null;
},
onSaved: (value) {
_email = value!;
},
),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your password';
}
return null;
},
onSaved: (value) {
_password = value!;
},
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// Process the registration data
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Processing Data')),
);
}
},
child: Text('Submit'),),],),),),);}}
Week 11
Q. Create an application to implement flutter calendar.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Simple Calendar Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CalendarPage(),
);
}
}
class CalendarPage extends StatefulWidget {
@override
_CalendarPageState createState() => _CalendarPageState();
}
class _CalendarPageState extends State<CalendarPage> {
DateTime _selectedDate = DateTime.now();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Simple Calendar Demo'),
),
body: Column(
children: [
_buildCalendarHeader(),
_buildDaysOfWeek(),
_buildCalendarGrid(),
],
),
);
}
Widget _buildCalendarHeader() {
return Container(
padding: EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
setState(() {
_selectedDate = DateTime(
_selectedDate.year,
_selectedDate.month - 1,
);
});
},
),
Text(
'${_selectedDate.year}-${_selectedDate.month}',
style: TextStyle(fontSize: 20.0),
),
IconButton(
icon: Icon(Icons.arrow_forward),
onPressed: () {
setState(() {
_selectedDate = DateTime(
_selectedDate.year,
_selectedDate.month + 1,
);
});
},
),
],
),
);
}
Widget _buildDaysOfWeek() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
.map((day) => Text(
day,
style: TextStyle(fontWeight: FontWeight.bold),
))
.toList(),
);
}
Widget _buildCalendarGrid() {
final daysInMonth = DateTime(_selectedDate.year, _selectedDate.month + 1, 0).day;
final firstDayOfMonth = DateTime(_selectedDate.year, _selectedDate.month, 1);
final startingWeekday = firstDayOfMonth.weekday;
return Expanded(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 7,
),
itemCount: daysInMonth + startingWeekday - 1,
itemBuilder: (context, index) {
if (index < startingWeekday - 1) {
return Container();
} else {
final day = index - startingWeekday + 2;
return GestureDetector(
onTap: () {
setState(() {
_selectedDate = DateTime(
_selectedDate.year,
_selectedDate.month,
day,
);
});
},
child: Container(
margin: EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: _selectedDate.day == day
? Colors.blueAccent
: Colors.transparent,
borderRadius: BorderRadius.circular(8.0),
),
child: Center(
child: Text(
'$day',
style: TextStyle(
color: _selectedDate.day == day
? Colors.white
: Colors.black,
),
),
),
),
);
}
},
),
);
}
}
Week 12
Q. Create an application to implement Animated Text in Flutter.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animated Text Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AnimatedTextPage(),
);
}
}
class AnimatedTextPage extends StatefulWidget {
@override
_AnimatedTextPageState createState() => _AnimatedTextPageState();
}
class _AnimatedTextPageState extends State<AnimatedTextPage> {
bool _isLargeText = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated Text Demo'),
),
body: Center(
child: GestureDetector(
onTap: () {
setState(() {
_isLargeText = !_isLargeText;
});
},
child: AnimatedDefaultTextStyle(
duration: const Duration(seconds: 1),
style: _isLargeText
? TextStyle(
fontSize: 50,
color: Colors.blue,
fontWeight: FontWeight.bold,
)
: TextStyle(
fontSize: 20,
color: Colors.black,
fontWeight: FontWeight.normal,
),
child: Text('Tap to Animate'),
),),),);}}

You might also like