https://github.com/lunaticpython2003/50-days-of-flutter
Repository detailing 50 days of my continuous path to expertise on Flutter
https://github.com/lunaticpython2003/50-days-of-flutter
Last synced: 4 months ago
JSON representation
Repository detailing 50 days of my continuous path to expertise on Flutter
- Host: GitHub
- URL: https://github.com/lunaticpython2003/50-days-of-flutter
- Owner: LunaticPython2003
- Created: 2024-01-30T11:14:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-02T14:05:59.000Z (over 2 years ago)
- Last Synced: 2024-02-02T20:36:39.850Z (over 2 years ago)
- Language: Dart
- Size: 43 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 50-Days-of-Flutter
The repository contains all the important concepts and codes that I used while learning Flutter. Each day has been marked by the appropriate heading, and link to the relevant codes -
## Day 1
Details of the widgets that have been covered on this day -
- AppBar -
- title - Used for adding text (or images) to the navigation bar
- leading - The area preceeded by the title
- Color - Colors.colorname[integer]
- Decorations - Used for adding specific decorations to a widget. Example
```c++
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.circular(20)),
```
This adds deepPurple color and creates a rounded border of radius 20 along the sides of a Container widget.
- Child and children -
- Child - Used when only one widget is to be encapsulated within another. Widgets like Column, Center support only one child
- Children - Has the capacity to add multiple widgets inside another.
Example - Column
- Expanded - This widget is used to automatically allign the containers or other widgets to use all the available screen real estate. Example usage -
```c++
body: Column(
children: [
Expanded(
flex: 2,
child: Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(20)),
child: const Center(
child: Text(
"Hello World",
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.bold,
),
)),
),
)
],
);
```
Some important things to consider in here -
- Multiple widgets can be encapsulated within the Column widget, like the Expanded widget(s) in here
- flex property of Expanded lets us specify how much of area will an individual widget take. In this case, the Expanded child having flex 2 will have a height twice as much as the others
## Day 2
Details of the widgets -
- ListView
- Same as Column but swipeable so that screen overflow is avoided
- ```scrollDirection: Axis.horizontal``` of ListView creates a scrollable widget in the horizontal direction.
Refer to this code
- ListView.builder
- Building multiple widgets -
```c++
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) => ListTile(
title: Text(index.toString()),
))
```
- itemCount - Refers to the total widgets that can be placed
- itemBuilder - Method to build the widgets
Refer to this code
## Day 3
Details of the widgets used
- GridLayout.builder()
- Similar to ListView.builder()
- ```c++
GridView.builder(
itemCount: 64,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4),
itemBuilder: (context, index) => Container(
decoration: BoxDecoration(
color: Colors.deepPurple[200],
borderRadius: BorderRadius.circular(20)),
margin: const EdgeInsets.all(4),
));
```
- This code creates 64 containers with each row containing 4 containers.
## Day 4
Details of the widgets used
- Stack
- Works just like it says; stacks one element over the other in the screen.
- ```c++
body: Stack(alignment: Alignment.center, children: [
Container(
height: 400,
width: 400,
decoration: const BoxDecoration(
color: Colors.deepPurple,
),
),
Container(
height: 300,
width: 300,
decoration: BoxDecoration(color: Colors.deepPurple[200]),
),
Container(
height: 200,
width: 200,
decoration: BoxDecoration(color: Colors.deepPurple[400]),
)
]),
```
- This renders 3 components, one on top of another with the subsequent boxes stacked on one another in the center. Refer to this code
- GestureDetector
- Used to perform a action when the user interacts with a widget. Interaction could be of any type, such as clicking on the widget, long pressing, etc.
- The widget takes a child (which in this case, is a Container), and the interaction method (onTap in this case). Refer to this code
## Day 4
Flutter Navigation
- The endpoints for the pages to route to, have to be defined in the routes section of MaterialApp().
- After the routes are mapped to the corresponding functions, they can be navigated to using `Navigator.pushNamed`
- Consider the example -
```c++
body: Center(
child: ElevatedButton(
child: const Text(
"Go to Page 1",
textAlign: TextAlign.center,
),
onPressed: () => Navigator.pushNamed(context, '/firstpage'),
)),
```
Here, when the button is pressed, the app moves to the /firstpage endpoint, which has been mapped in the routes section of the MaterialApp. Refer to this code