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/
