Scribd
Upload
8 views4 pages

Flutter Revision With Comments

This document provides a comprehensive revision of Flutter, covering key concepts such as widget types, state management, navigation, forms, HTTP requests, and local storage. It includes code examples and best practices for developing Flutter applications, along with CLI commands and folder structure recommendations. Additionally, it highlights useful packages and themes for styling applications.

Uploaded by

anshraut807
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views4 pages

Flutter Revision With Comments

This document provides a comprehensive revision of Flutter, covering key concepts such as widget types, state management, navigation, forms, HTTP requests, and local storage. It includes code examples and best practices for developing Flutter applications, along with CLI commands and folder structure recommendations. Additionally, it highlights useful packages and themes for styling applications.

Uploaded by

anshraut807
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Flutter Complete Revision (With Common Syntax)

Flutter Revision with Comments

FLUTTER COMPLETE REVISION (WITH COMMON SYNTAX AND COMMENTS)

1. Flutter Basics
// Entry point of the Flutter application
void main() {
runApp(MyApp()); // Launches the app and starts rendering
}

// Stateless widget: UI does not change over time


class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: HomeScreen()); // Provides Material Design and sets
HomeScreen as default
}
}

2. Widget Types
// StatelessWidget example - used when no UI update is needed
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('Hello'); // Just displays static text
}
}

// StatefulWidget example - UI can change with state


class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
int counter = 0;
@override
Widget build(BuildContext context) {
return Text('$counter'); // Displays counter value which can be updated
}
}

3. Common Widgets
// Row and Column help arrange widgets horizontally or vertically
Row(children: [Text('Left'), Text('Right')])
Column(children: [Text('Top'), Text('Bottom')])

// Container is like a box that can have padding, color, etc.


Container(padding: EdgeInsets.all(10), color: Colors.blue, child: Text('Container'))
Flutter Complete Revision (With Common Syntax)

// Text styling
Text('Hello', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold))

// Button with click event


ElevatedButton(onPressed: () { print('Clicked'); }, child: Text('Click Me'))

4. State Management
// Use setState to update UI when variable changes
int count = 0;
ElevatedButton(onPressed: () {
setState(() { count++; }); // Triggers UI rebuild with new count
}, child: Text('Count: $count'))

// Provider package helps manage state across widgets


class Counter with ChangeNotifier {
int value = 0;
void increment() { value++; notifyListeners(); } // Notify listeners to rebuild UI
}
context.read<Counter>().increment(); // Call from UI

5. Navigation & Routes


// Navigate to new screen using MaterialPageRoute
Navigator.push(context, MaterialPageRoute(builder: (context) => NextScreen()));
// Navigate using named route
Navigator.pushNamed(context, '/about');

6. Forms & Input


final _formKey = GlobalKey<FormState>(); // Key to identify the form
Form(
key: _formKey,
child: Column(children: [
TextFormField(validator: (value) => value == null || value.isEmpty ? 'Enter
something' : null),
ElevatedButton(onPressed: () {
if (_formKey.currentState!.validate()) {
// Form is valid
}
}, child: Text('Submit'))
]),
)

7. HTTP Request
// Fetch data from API using HTTP package
import 'package:http/http.dart' as http;
import 'dart:convert';
Future<void> fetchData() async {
final response = await http.get(Uri.parse('https://api.example.com/data'));
if (response.statusCode == 200) {
var data = jsonDecode(response.body); // Convert JSON to Dart object
print(data);
Flutter Complete Revision (With Common Syntax)

}
}

8. Async/Await
// Perform task asynchronously
Future<String> getData() async {
await Future.delayed(Duration(seconds: 1)); // Simulates delay
return 'Done';
}

9. Local Storage - Shared Preferences


// Save and retrieve data locally on the device
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setString('username', 'John');
String? user = prefs.getString('username');

10. Widget Lifecycle


// Called when the widget is inserted into widget tree
initState()
// Called when the widget is removed permanently
dispose()

11. Themes
// Define global styles using ThemeData
MaterialApp(theme: ThemeData(primarySwatch: Colors.blue, textTheme: TextTheme(bodyLarge:
TextStyle(fontSize: 18))))

12. Responsive Layout


// Adjust layout according to screen size
MediaQuery.of(context).size.width // Gets screen width
LayoutBuilder(builder: (context, constraints) {
return constraints.maxWidth > 600 ? WideLayout() : NarrowLayout();
});

13. Flutter CLI Commands


// flutter doctor - Check setup
// flutter create project_name - Create new project
// flutter run - Run project
// flutter build apk - Build Android APK
// flutter pub get - Install dependencies
// flutter upgrade - Upgrade Flutter SDK

14. Useful Packages


provider, riverpod, http, dio, shared_preferences, hive, go_router

15. Best Practices


// Use const where possible for performance
// Keep logic separate from UI
// Split big widgets into smaller ones
Flutter Complete Revision (With Common Syntax)

16. Folder Structure


/lib, /screens, /widgets, /models, /services, /assets

17. pubspec.yaml Example


name: my_app
dependencies:
flutter:
sdk: flutter
http: ^0.14.0
provider: ^6.0.0
shared_preferences: ^2.0.0
assets:
- assets/images/

You might also like