Some of the codes for Flutter and some of its
basics
Flutter is an open-source UI software development toolkit
created by Google for building natively compiled
applications for:
Mobile (Android & iOS)
Web
Desktop (Windows, macOS, Linux)
From a single codebase
void main() {
String name = "Swastik"; #variable with
datatype
print("Hello, $name!");
}
Everything in Flutter is a widget.
In Flutter, widgets are the fundamental building blocks of
the user interface. Each element on the screen of a Flutter
app is a widget, and the entire UI is composed of a tree of
widgets. Widgets describe what their view should look like
given their current configuration and state.
Types of Widgets:
Stateless Widgets: These widgets are immutable,
meaning their properties cannot change once they are
built. They are used for static content or UI elements
that do not need to change over time. Examples
include text, icons, and images.
Eg:
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: const Text('Stateless Widget Example'),
),
body: const Center(
child: const Text('Hello, World!'),
),
),
);
}
}
Stateful Widgets: These widgets can change their state
over time. They are used for dynamic content that needs
to update based on user interactions or other factors.
Examples include buttons, sliders, and text fields.
Eg:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Stateful Widget Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('You have pushed the button this
many times:'),
Text(
'$_counter',
style:
Theme.of(context).textTheme.headlineMedium, //
Changed from headline4 to headlineMedium
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
),
);
}
}
Categories of Widgets
Flutter widgets are categorized based on their
functionality:-
Accessibility: Widgets that make an app more
accessible.
Animation and Motion: Widgets that add animations.
Assets, Images, and Icons: Widgets for managing
assets and displaying images and icons.
Async: Widgets supporting asynchronous patterns.
Basics: Essential widgets for any Flutter app.
Cupertino: iOS-styled widgets.
Input: Widgets for user input.
Interaction Models: Widgets for managing touch events
and routing users.
Layout: Widgets for arranging other widgets.
Material Components: Widgets following Google's
Material Design.
Painting and Effects: Widgets for applying visual effects.
Scrolling: Widgets for scrollable content.
Styling: Widgets for theming and responsiveness.
Text: Widgets for displaying and styling text
Code Breakdown:-
✅ 1. void main() => runApp(const MyApp());
🔹 What it does:
This is the entry point of every Dart/Flutter app.
runApp() takes a Widget and makes it the root of the
widget tree (starting point of UI).
Here, it takes MyApp, which is the root widget of your
app.
✅ 2. class MyApp extends StatefulWidget
🔹 What it does:
Creates a custom widget called MyApp.
Since it's Stateful, the UI can change over time.
StatefulWidget is used when you need to maintain a
state (like a counter)
✅ 3. createState() => _MyAppState();
🔹 What it does:
Creates a connection between your StatefulWidget and its
associated state class (_MyAppState), which holds the
data and UI logic.
The underscore _ makes _MyAppState private to this file.
✅ 4. _MyAppState – The Widget’s State Class
This is where the app’s data (state) and UI building
logic lives.
✅ 5. setState(() { ... });
🔹 What it does:
Notifies Flutter that the state has changed.
It triggers a rebuild of the UI to reflect the new
state.
✅ 6. @override Widget build(BuildContext context)
🔹 What it does:
The build() method returns the UI that should be
displayed.
It's called every time you use setState().
✅ 7. MaterialApp Widget
🔹 What it does:
Wraps your app with Material Design, providing things
like:
Navigation
Themes
Basic Material UI setup
✅ 8. Scaffold Widget
🔹 What it does:
Provides the basic screen structure: app bar, body,
floating buttons, drawer, etc.
✅ 9. AppBar Widget
🔹 What it does:
Creates the top navigation bar of the app.
✅ 10. Center, Column, and Text Widgets
🔹 What they do:
Center: Aligns its child to the center.
Column: Stacks children vertically.
Text: Displays text.
✅ 11. floatingActionButton and Icon
🔹 What they do:
Creates a floating circular button.
onPressed defines what happens when tapped.
A sample Project (Internship recruitment)
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class Internship {
final String id;
final String title;
final String company;
final String location;
final String description;
Internship({
required this.id,
required this.title,
required this.company,
required this.location,
required this.description,
});
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Internship Recruitment App',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: const InternshipListScreen(),
);
final List<Internship> dummyInternships = [
Internship(
id: '1',
title: 'Mobile Development Intern',
company: 'Tech Solutions Inc.',
location: 'San Francisco, CA',
description: 'Assist in developing and maintaining mobile
applications. This role involves working with cross-functional teams,
participating in code reviews, and contributing to the overall
software development lifecycle.',
),
Internship(
id: '2',
title: 'Web Development Intern',
company: 'Innovate Web Studios',
location: 'New York, NY',
description: 'Work on front-end and back-end web development
tasks. You will gain experience with modern web frameworks,
database interactions, and deploying applications.',
),
Internship(
id: '3',
title: 'Data Science Intern',
company: 'Data Insights Co.',
location: 'Seattle, WA',
description: 'Assist in data analysis, modeling, and visualization.
Responsibilities include cleaning datasets, building predictive
models, and presenting insights to stakeholders.',
),
Internship(
id: '4',
title: 'Data Analytics Intern',
company: 'Data Insights Co.',
location: 'New York, Manhattan',
description: 'Assist in data analysist position, modeling, and
visualization. Responsibilities include cleaning datasets, building
predictive models, and presenting insights to stakeholders.',
), // Added missing comma here
Internship(
id: '5',
title: 'Cybersecurity Intern',
company: 'Linux Private Lt',
location: 'Texas, Austin',
description: 'Assist in cyber security position, modeling, and
visualization. Responsibilities include ethically stopping attacks,
building predictive models to prevent malicious attacks',
];
class InternshipListScreen extends StatelessWidget {
const InternshipListScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Available Internships'),
),
body: ListView.builder(
itemCount: dummyInternships.length,
itemBuilder: (BuildContext context, int index) {
final Internship internship = dummyInternships[index];
return ListTile(
title: Text(internship.title),
subtitle: Text('${internship.company} - $
{internship.location}'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute<void>(
builder: (BuildContext context) =>
InternshipDetailScreen(internship: internship),
),
);
},
);
},
),
);
class InternshipDetailScreen extends StatelessWidget {
final Internship internship;
const InternshipDetailScreen({super.key, required
this.internship});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Internship Details'),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
internship.title,
style: Theme.of(context).textTheme.headlineSmall,
),
const SizedBox(height: 8.0),
Text(
internship.company,
style:
Theme.of(context).textTheme.titleMedium!.copyWith(color:
Colors.grey[700]),
),
const SizedBox(height: 4.0),
Text(
internship.location,
style:
Theme.of(context).textTheme.titleSmall!.copyWith(color:
Colors.grey[600]),
),
const Divider(height: 32.0),
Text(
'Description',
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(height: 8.0),
Text(
internship.description,
style: Theme.of(context).textTheme.bodyLarge,
),
],
),
),
);
Certain more functions related to above:
Widget/Class Built-in Purpose
Function
SingleChildScrollView (Widget) Makes the content
vertically scrollable
EdgeInsets.all() Built-in Uniform padding
constructor/function for scroll view
Column (Widget) Arranges children
vertically
CrossAxisAlignment.start (Enum value) Left-aligns column
children
Text (Widget) Displays text
Theme.of(context).textThem Built-in theme Dynamically
accessor fetches text styles
e
.copyWith(color: ...) Built-in method on Adjusts color of
TextStyle text style
SizedBox (Widget) Provides fixed
vertical (or
horizontal) gap
Divider (Widget) Draws a horizontal
separator
