Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nabind47/learn_flutter
https://github.com/nabind47/learn_flutter
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/nabind47/learn_flutter
- Owner: nabind47
- Created: 2023-12-23T02:01:19.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-24T12:03:24.000Z (about 1 year ago)
- Last Synced: 2024-11-17T01:12:36.546Z (2 months ago)
- Language: Dart
- Size: 941 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Mobile App Development Course](https://www.youtube.com/watch?v=bE7CgftuaPE&list=PLlI_C5xe_7PxdqygFgK8joTck1TKQAPaH&index=6&ab_channel=TechPana)
```dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Nabin Dhami")),
body: const Column(
children: [
Center(child: Text("Hello World!!")),
],
),
)));
}
```
### Stateless Widget
```dart
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: MyApp()));
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Nabin Dhami")),
body: const Co
lumn(
children: [
Center(child: Center(child: Text("Hello World!!"))),
],
),
);
}
}
```
### Statefull Widget
```dart
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: MyApp()));
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State createState() => _MyAppState();
}
class _MyAppState extends State {
int score = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Nabin Dhami")),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.plus_one),
onPressed: () {
setState(() {
score = score + 1;
});
},
),
body: Column(
children: [
const Center(child: Center(child: Text("Hello World!!"))),
Text(
'$score',
),
],
),
);
}
}
```
## Widgets and Looping around Widgets
```dart
body: Container(
child: Column(
children: const [
ListTile(
leading: Icon(Icons.computer),
trailing: Icon(Icons.more_horiz),
title: Text("Computer Engineering"),
subtitle: Text("Bachelors in Computer Engineering"),
tileColor: Colors.pink,
),
Padding(
padding: EdgeInsets.only(top: 8.0),
child: ListTile(
leading: Icon(Icons.computer),
trailing: Icon(Icons.more_horiz),
title: Text("Software Engineering"),
subtitle: Text("Bachelors in Software Engineering"),
tileColor: Colors.pink,
),
),
],
),
),
```
### List View Builder
```dart
body: Container(
child: ListView.builder(
itemCount: 5,
itemBuilder: (context, index) {
return const Padding(
padding: EdgeInsets.only(top: 8.0),
child: ListTile(
leading: Icon(Icons.computer),
trailing: Icon(Icons.more_horiz),
title: Text("Computer Engineering"),
subtitle: Text("Bachelors in Computer Engineering"),
tileColor: Colors.pink,
),
);
}),
),
```
## Routing and Dynamic Routing
```dart
import 'package:flutter/material.dart';
class SettingsScreen extends StatelessWidget {
const SettingsScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Settings")),
body: Container(child: const Text("Settings Screen")));
}
}
```
> `GestureDetector` such that navigation can be applied with other widgets
```dart
body: Column(
children: [
IconButton(
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (_) => const SettingsScreen()));
},
icon: const Icon(Icons.settings))
],
),
```
> `Navigator.pushReplacement()` such that we dont allow to get back
## Dynamic Routing
```dart
var routes = {
"/": (_) => const MyHomePage(title: "Home"),
"/settings": (_) => const SettingsScreen(),
};
```
```dart
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
initialRoute: "/",
routes: routes,
onUnknownRoute: (settings) =>
MaterialPageRoute(builder: (context) => const ScreenNotFound()),
);
}
```
```dart
IconButton(onPressed: () {
Navigator.pushNamed(context, "/settings");
}, icon: const Icon(Icons.settings))
```
> `onTap: () => Navigator.pushReplacementNamed(context, "/")`
## Bottom Navigation
```dart
List screenList = [homePageScreen, const SettingsScreen()];
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title)
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currIndex,
onTap: (value) {
setState(() {
_currIndex = value;
});
},
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Settings")
]),
body: screenList[_currIndex],
)
```
> [Flutter Launcher Icon](https://pub.dev/packages/flutter_launcher_icons)