lp/Flutter.txt at master · manozkumarj/lp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
* Flutter framework is developed by Google
* Flutter framework is used to build native cross-platform (iOS, Android) apps with one programming language and codebase.
* Flutter uses Dart programming language
* Dart is focused on frontend(mobie apps, web) user interface (UI) development.
* Flutter built upon Dart
* In Flutter everything is a 'Widget' - Our App's UI is a Widget tree
* Flutter by default embraces 'Material Design System'. Material is a 'Design System' created (and heavily used) by Google

* Flutter is all about Widgets

* void main() function will automatially executed when App starts by Flutter & Dart

* If we don't want a class to be used in other file then we need to prefix the class name with '_', below
class _MyAppState extends State<MyApp>

Note: Same thing applies for properties & method names

* We can use 'Dart Debugger' from VS code

* '@required' decorator introduced by Flutter, we should import either 'material' or 'foundation' package to use '@required' decorator.

*


****************************************** VS Code Extensions ******************************************
* Flutter by Dart Code
*

****************************************** Folder Structure ******************************************
* .idea --> related to android studio
* android
* build --> Will be generated by Flutter SDK
* ios
* lib --> It's our working directory
* test
* .metadata
* .packages
* pubspec.lock --> This file will be generated automatically by Flutter at the end based on "pubspec.yaml" file
* pubspec.yaml --> Used to configure assets/fonts kind of things - and contains dependencies as well
* README.md

Note: PROJECT_NAME.iml file will be generated automatically by Flutter

****************************************** Useful commands ******************************************
* flutter create <app_name_with_underscore_separation>
* flutter doctor
* flutter run

****************************************** Imports **************************************************
* import 'package:flutter/material.dart'
* import 'package:flutter/foundation.dart'
*

****************************************** Widgets **************************************************
Output & Input (Visible)
--------------------------------------------------------------------------------------------
* RaisedButton()
* Text()
* Card()
* FlatButton()
* Image()
* Icon()
* TextField()
*


Layout & Control (Invisible)
--------------------------------------------------------------------------------------------
* Row()
* Column(
	mainAxisAlignment: MainAxisAlignment.center,
	crossAxisAlignment: CrossAxisAlignment.streath,
	children: <Widget>[]
)

* ListView()
* Stack()
* ListView()
	* ListTile()
* GridView()
*


Other
--------------------------------------------------------------------------------------------
* Saffold()
* AppBar
* Container(
	width: double.infinity,
	child: Text(),
)

* Card(
	color: Colors.white,
	child: Text()
)

* Center()
* GestureDetector()
* InkWell()

****************************************** Sample code **************************************************
Example 1:
--------------------------------------------------------------------------------------------
import 'package:flutter/material.dart';

void main(){
	runApp(MyApp());
}
// void main() => runApp(MyApp());


class MyApp extends StatelessWidget{
	@override // this is decorator
	Widget build(BuildContext context){
		return MaterialApp(home: Text("Hello World!"));
	}
}


Example 2:
--------------------------------------------------------------------------------------------
return Container(
	width: double.infinity,
	margin: EdgeInsets.all(10),
	child: Text(
		'Hello world',
		style: TextStyle(fontSize: 18),
		textAlign: TextAlign.center,
	),
);


Example 3:
--------------------------------------------------------------------------------------------
return Container(
	width: double.infinity,
	margin: EdgeInsets.all(10),
	child: RaisedButton(
		color: Colors.blue,
		textColor: Colors.white,
		child: Text(
			'Hello world',
			style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
			textAlign: TextAlign.center,
		),
		onPressed: null,
	),
);

****************************************** Error types **************************************************
* RangeError

****************************************** Flutter websites ******************************************
* https://flutter.dev/
* https://flutter.dev/docs/development/ui/widgets
* https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e
* https://howtodothisinflutter.com/
* https://www.codewithakshay.com/cheat-sheets