fedallbest/joplin-notes
Watch
1
0
Fork
You've already forked joplin-notes
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

initial

Browse source
This commit is contained in:
nm1 2026-11-04 00:33:23 +05:30
commit 74ae93a96e
16 changed files with 94691 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

212
joplin notion extension/Web Development/Flutter/Coding.md Normal file
View file

@ -0,0 +1,212 @@
Coding
Tree of widgets
- Widgets can be specified as `Widgetname(fieldname : text or Widgetname(...))`
```dart
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// TRY THIS: Try changing the color here to a specific color (to
// Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
// change color while the other colors stay the same.
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
//
// TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
// action in the IDE, or press "p" in the console), to see the
// wireframe for each widget.
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed this button this many times',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
```
&nbsp;
**example to show some features and widgets**
```dart
import 'package:flutter/material.dart';
void main() {
// runApp(const MyApp());
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// TRY THIS: Try running your application with "flutter run". You'll see
// the application has a purple toolbar. Then, without quitting the app,
// try changing the seedColor in the colorScheme below to Colors.green
// and then invoke "hot reload" (save your changes or press the "hot
// reload" button in a Flutter-supported IDE, or press "r" if you used
// the command line to start the app).
//
// Notice that the counter didn't reset back to zero; the application
// state is not lost during the reload. To reset the state, use hot
// restart instead.
//
// This works for code too, not just values: Most code changes can be
// tested with just a hot reload.
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// TRY THIS: Try changing the color here to a specific color (to
// Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
// change color while the other colors stay the same.
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Center(
child: Text(widget.title),
)),
body: Center(
child: Container(
// constraints: const BoxConstraints(
// maxWidth: 200,
// maxHeight: 300,
// ),
// mainAxisSize: ,
width: 200,
// alignment:
// width: EdgeInsets.only(left: 114),
child: Center(
// widthFactor: 100.0,
child: Card(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
color: const Color.fromRGBO(30, 190, 30, 0.1),
// color : 'green',
// margin: EdgeInsets.all(114.0),
child: Row(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
//
// TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
// action in the IDE, or press "p" in the console), to see the
// wireframe for each widget.
// mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
const Text(
'Is it nice?',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
)))),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
```
![cab00f7ebd8c4f0d838263c5f21dd8c7.png](../../../_resources/cab00f7ebd8c4f0d838263c5f21dd8c7.png)
![9531fc7c54bfb4c303be49d30f3b7d29.png](../../../_resources/9531fc7c54bfb4c303be49d30f3b7d29.png)

125
joplin notion extension/Web Development/Flutter/Dart/Basics 2.md Normal file
View file

@ -0,0 +1,125 @@
Basics 2
**for-in loop and foreach loop** : used with collections
```dart
void main() {
var no = [1, 2, 3]; // no here is list which is a collection
// For-in loop
for (var x in no) {
print(x);
}
// foreach
no.forEach((n) => print(n));
}
```
&nbsp;
**Collections**
- Even if we dont mention collection name and use var instead then due to type inference variable will be converted to that collection.
- List can contain values of different data type. To make sure list contains values of one datatype only, use this `List<datatype>` . eg : `List<String>`
- To make list immutable use const keyword before list.
- When we assign a list to other variable reference is copied. so to make a deep copy use spread operator
```dart
void main() {
// List
List name = ['Rishav', 'Ramesh', 10];
name[1] = 'Suresh';
print(name); // outputs : [Rishav, Suresh, 10]
for (var i in name) {
print(i);
}
List<String> name2 = ['Rishav', 'Bharghav'];
print(name2);
List name3 = const ['Rishav', 'Raghav'];
name3[1] = 'as'; // will give error : Cannot modify an unmodifiable list
print(name3);
var name4 = name; // shallow copy
var name5 = [...name]; //deep copy
name[2] = 12;
print('name4: $name4'); // Output: name4: [Rishav, Suresh, 12]
print('name5: $name5'); // Output: name5: [Rishav, Suresh, 10]
// Sets
Set elements = {'hydrogen', 'oxygen', 'hydrogen'};
print(elements); // Output: {hydrogen, oxygen}
print(elements.runtimeType); // Output: _Set<dynamic>
// ways to make set con
var elements2 = <String>{};
Set<String> elements3 = {};
// both elements2 and elements3 have same runtimeType
print(elements3.runtimeType); // Output: _Set<String>
// Maps
var elements4 = {};
print(elements4.runtimeType); // Output: _Map<dynamic, dynamic>
var student = {'name': 'Rishav', 'age': 20, 'email': 'rishav@email.com'};
print(student.runtimeType); // Output: _Map<String, Object>
}
```
&nbsp;
**Functions**
- dart provides shorthand version of functions too to avoid need for return statment. useful for writing pure functions.
- by default arguments are called positional arguments so order of values in arguments is necessary but with named arguments we can change the order as we have to provide name ie parameter variable at left side.
- there are anonymous functions too like in js
```dart
void main() {
// Functions
print(sum('Rishav', ' Kumar')); //Output: Rishav Kumar
print(sum2(1, 2)); //Output: 3
print(sum3(n2: 'Kumar', n1: 'Rishab')); //Output: RishabKumar
}
dynamic sum(var n1, var n2) {
return n1 + n2;
}
// anonymous function
var f=(){
return 2;
};
or
var f=()=> 2;
// positional arguments
dynamic sum2(var n1, var n2) => n1 + n2;
// named arguments
dynamic sum3({var n1, var n2}) => n1 + n2;
```
&nbsp;
**More about Lists**
```dart
void main(){
List<Map<String, Object>> list = [
{'string': 'Strength', 'amount': 3},
{'string': 'Sugar', 'amount': 3}
];
List<Object?> lis= list.map((e)=> e["string"] ).toList();
print(lis);
print(list.map((e)=> e["string"] ));
}
```

288
joplin notion extension/Web Development/Flutter/Dart/Basics 3 Classes.md Normal file
View file

@ -0,0 +1,288 @@
Basics 3 Classes
**Classes and Objects**
- in dart there is no constructor overloading so instead named constructor have to be used.
```dart
class Point {
int? x;
int? y;
// Default constructor
Point() {
x = 0;
y = 0;
}
// named constructor
Point.paramed(int x, int y) {
this.x = x;
this.y = y;
}
// String interpolation
void printData() => print('$x + $y');
// functions
final void Function() onPressed;
}
void main() {
Point p = Point();
print(p.x);
Point p2 = Point.paramed(2, 3);
print(p2.x);
p.printData();
}
```
&nbsp;
**Classes and enums**
- Intead of initializing data members inside block of constructor we can define them in initializer list too as it improves performance too
- we cant use some operators bcz of some null safety measures introdued in dart so use like this `assert(x!=null && x > 0)`
- For Getter and setters , we have keywords too
```dart
class Point {
int? x;
int? y;
// Default constructor
Point() {
x = 0;
y = 0;
}
// named constructor
Point.paramed(int x, int y) {
this.x = x;
this.y = y;
}
// or
Point.paramed2(this.x, this.y);
// or
Point.paramed3(this.x, this.y) : assert(x != null && x > 0) {
printData();
}
Point.fromMap(Map<String, int> map) {
this.x = map['x'];
this.y = map['y'];
}
Point.fromMap2(Map<String, int> map)
: x = map['x'],
y = map['y'] {
printData();
}
// String interpolation
void printData() => print('$x + $y');
void printData2() {
print('$x - $y');
}
// getters
int? get pointX => this.x;
int? get pointY => this.y;
Map<String, int?> get getMap => <String, int?>{
'x': this.x,
'y': this.y,
};
// setters
set setX(int x) => this.x = x;
}
void main() {
Point p = Point();
print(p.x);
Point p2 = Point.paramed(2, 3);
print(p2.x);
p.printData();
p.printData2();
Point p3 = Point.fromMap(<String, int>{
'x': 10,
'y': 20,
});
p3.printData();
Point p4 = Point.fromMap2(<String, int>{
'x': 10,
'y': 20,
});
print(p3.pointX);
print(p3.pointY);
print(p3.getMap);
p.setX = 500;
p.printData();
}
```
Enums
- Enum is special variable which contains fixed number of constant values
```dart
enum PaymentStatus { notPaid,paid };
void main() {
final status = PaymentStatus.notPaid;
switch (status) {
case PaymentStatus.notPaid:
print(1);
break;
default:
8;
}
}
```
&nbsp;
**Exceptional Handling**
- Infinity is a constant which is of double type
- To avoid typecasting automatically use tilt symbol before operator. eg : `var c2 = a ~/ b`
- Multiple catch can be used too for different types of exception too using `on <ExceptionName>`
```dart
// Custom Exception
class AgeException implements Exception {
String errMsg() => 'Age cannot be less than zero';
}
void main() {
print('programming knowledge');
try {
var a = 10;
var b = 0;
var c1 = a / b; // Output : Infinity
// var c2 = a ~/
// b; // Will give Error for unhandled exception : IntegerDivisionByZeroException
print('c1: $c1');
// print('c2: $c2');
var s = [1, 2, 3, 4];
print(s[2]);
var age = -10;
if (age < 0) {
throw AgeException();
}
} on AgeException catch (e) {
print(e.errMsg());
} on IntegerDivisionByZeroException catch (e) {
print('Division of zero isnt possible: ${e.message}');
} catch (e) {
print('Another catch block');
} finally {
print('always executed');
}
}
```
&nbsp;
Async and await
- Future is just like promise in javascript and contains result of asyncronous operation which have 2 states ie completed and uncompleted. and if completed then its data is either some value or error.
```dart
Future<void> fetchUserData() {
return Future.delayed(Duration(seconds: 2), () => print('Data'));
}
void main() {
fetchUserData();
print('Fetching user data');
}
```
- async functions always returns Future datatype. async keyword will always be between closing parenthesis and opening curly braces
- If we dont use await or then we will get instance of the future not the result. if we use then it will assign callback for the result and switch to next line and if we use await then it will wait for result then move to next line.
```dart
Future<String> fetchUserData() {
return Future.delayed(Duration(seconds: 2), () => 'Data');
}
Future<String> fetchUserData2() {
return Future.delayed(Duration(seconds: 4), () => 'Data2');
}
Future<String> userMsg() async {
var data = await fetchUserData();
return '$data';
}
Future<String> userMsg2() async {
var data = await fetchUserData2();
return '$data';
}
void main() async {
print('Fetching');
// total time will be of 6s
print(await userMsg());
print(await userMsg2());
// total time will be of 4s
userMsg().then((value) => print(value));
userMsg2().then((value) => print(value));
// their output will be "Instance of 'Future<String>' "
print(userMsg());
print(userMsg2());
}
```
&nbsp;
**Functions**
In Dart, `function` (lowercase 'f') refers to a specific, named block of code that performs a task. `Function` (uppercase 'F') refers to the general *type* of functions. Think of it like the difference between a specific car (e.g., a "Honda Civic") and the general concept of a "car."
Here's a breakdown:
**1. `function` (lowercase):**
* Represents a named, callable block of code.
* Used when defining or calling a specific function.
```dart
// Defining a function called 'myFunction'
void myFunction() {
print('Hello from myFunction');
}
// Calling the function
myFunction(); // Output: Hello from myFunction
```
**2. `Function` (uppercase):**
* Represents the function type itself.
* Used to declare variables, parameters, or return types that can hold any function, regardless of its specific signature (parameters and return type).
```dart
// Declaring a variable that can hold any function
Function myCallback;
// Assigning a function to the variable
myCallback = myFunction; // Assigning the 'myFunction' function
```
&nbsp;
Regex
```dart
import 'dart:core';
void main() {
final exp=RegExp(r'/(.+)\..+$');
print(exp.firstMatch('a/jk.mp')!.group(1)); // jk
print(exp.firstMatch('a/jk.mp')); // true
}
```

160
joplin notion extension/Web Development/Flutter/Dart/Basics.md Normal file
View file

@ -0,0 +1,160 @@
Basics
- hello world program
```dart
void main() {
print('hello world');
}
```
- data types
primitive:
int, float,double, char, string, bool
example
```dart
void main() {
String v = 'Rishav';
print(v);
}
```
dynamic : those who can contain any data type
var keyword
```dart
void main() {
var v = 'Rishav';
var v1 = 10;
var v2 = 80.12;
print(v);
print(v1);
print(v2);
}
```
dynamic keyword
unlike var whose datatype is fixed when assigned, in dynamic, datatype can be changed anytime
&nbsp;
const keyword : once value assigned, it cant be changed
&nbsp;
late keyword is non nullable and initialization will take place later and till then it wont recieve null and wait for its value.
```dart
import 'dart:io';
void main() {
const v = 'Rishav';
var v1;
v1 = stdin.readLineSync(); // input 12
dynamic v2 = 80.12;
v2 = stdin.readLineSync(); //input asd (a string)
print("Value of v is $v");
print(v1);
print(v2);
}
```
**Note** : In case of var and const , when we assign value, that value will be assigned during compile time so in future if that assign value (which maybe time or some value from api which can be changed) then in that case dynamic can be used to assign value at run time.
&nbsp;
final and const keyword are also similar but in case of objects(arrays) if const is used array is immutable too(means elements inside array cant be changed)
- comments
```dart
// inline comment
/*
*
* blocks of code
*/
/// documentation
```
- operators and other logical statements
if/else,switch,for , while , do-while loop and all operators even ternary are C like
&nbsp;
**Type casting**
```dart
void main() {
// string to integer
var one = int.parse('1');
assert(one == 1);
one += 10;
print('one: $one');
//integer to string
var oneString = 1.toString();
oneString += 'Rishav';
print('oneString: ' + oneString);
// decimal to string
var oneString2 = 3.1234.toString();
var oneString2D = 3.1234.toStringAsFixed(2);
assert(oneString2D == '3.12');
print('oneString2D: ' + oneString2D);
if (oneString2D == '3.12')
print('correct');
else {
print('incorrect');
}
}
```
&nbsp;
**Null aware operators**
Without null aware operator
```dart
class Num {
var num = 10;
}
void main() {
// var n = Num();
var n;
int no = 0;
if (n != null) {
no = n.num;
}
// print(n) // if var n = Num() then output : Instance of 'Num'
// print(no) if var n = Num() then output : 10
print(n); // output : null
print(no); // output : 0
}
```
With null aware operator
```dart
void main() {
// var n = Num();
var n;
int? no = 0;
// if (n != null) {
// no = n.num;
// }
no = n?.num;
// print(n) // if var n = Num() then output : Instance of 'Num'
// print(no) if var n = Num() then output : 10
print(n); // output : null
print(no); // output : null
}
```
In case of n being null if we dont want to assign null to `no` of n is null and instead some assign other v
`no = n?.num ?? 0;`
for directly assigning value to a variable whose value is null use `??=`
```dart
// ??=
void main() {
int? no;
print(no ??= 100); // outputs : 100
print(no); // outputs : 100
}
```

9
joplin notion extension/Web Development/Flutter/Dart/Commands.md Normal file
View file

@ -0,0 +1,9 @@
Commands
- there r two ways to execute code
`dart main.dart` : directly runs code. useful for quick and single dart file
`dart run main.dart` : useful for running a project with lot of other dependencies specified in `pubspec.yaml` file
- dart uses AOT(Ahead Of Time) compiler to create executable and jit(Just In Time) interpreter to run code directly which means features like hot reload can be used
`dart run main.dart` : jit interpreter
`dart compile exe main.dart -o output` and to run this self contained executable called output `./output`

3
joplin notion extension/Web Development/Flutter/Dart/Extras.md Normal file
View file

@ -0,0 +1,3 @@
- dart null check
use this `?.` for conditional thing and use `!.` for null check
`ModalRoute.of(context)!.settings.arguments;`

81
joplin notion extension/Web Development/Flutter/Extras.md Normal file
View file

@ -0,0 +1,81 @@
Extras
- adb
- this `-k` flag means it will keep cache and app data so making it more safer
- `adb shell`
- `adb shell pm list packages` to list installed packages
- adb uninstall <package_name> : to uninstall app
- `adb shell pm uninstall -k --user 0 <application_name>` to safely install package and not uninstall system istead
- `adb shell pm disable-user --user 0 com.miui.android.fashiongallery` to disable for user in case cant be deleted for user
- video players
https://pub.dev/packages/video_player_media_kit/example
[media_kit_ex.zip](../../../_resources/media_kit_ex.zip)
- pip (Picture in picture)
https://pub.dev/packages/flutter_in_app_pip
https://pub.dev/packages/pip_view (more scores than upper one)
- audio play background
https://pub.dev/packages/just_audio_background
- some design kits like material design
[designs ui.txt](../../../_resources/designs%20ui.txt)
- file system
- https://docs.flutter.dev/cookbook/persistence/reading-writing-files
- in android for accessing external storage need a permission handler to grant storage like this
https://pub.dev/packages/permission_handler
```dart
Future<void> storagePermissions() async {
// var status = await Permission.storage.request();
var status = await Permission.storage.request();
// Permission.storage.request();
// var status = await Permission.camera.request();
if (status.isDenied) {
print('storage permission denied');
} else if (status.isGranted) {
print('storage permission granted');
}
}
```
- also in `AndroidManifest.xml` , add following
for below android 11
```xml
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
```
for above andoid 11
```xml
<uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"/>
```
- by default only photos and videos access is granted so for full grant add following in manifest
`<application android:requestLegacyExternalStorage="true">`
- forms
https://docs.flutter.dev/cookbook/forms/text-input
- fetch data from internet
https://docs.flutter.dev/cookbook/networking/fetch-data
- parsing html
https://pub.dev/packages/html
[parsing_with_new.dart](../../../_resources/parsing_with_new.dart)
- toast in flutter
https://docs.flutter.dev/cookbook/design/snackbars
- dropdown menu
https://api.flutter.dev/flutter/material/DropdownMenu-class.html
- to add support for platforms use
`flutter create --platforms=ios,android foo` foo here is path of directory containing pubspec.yml
&nbsp;
&nbsp;
&nbsp;
### Snipppets
- popupmenu
https://betterprogramming.pub/popup-menu-customization-in-flutter-aa8827f6ce39
[popupmenu.dart](../../../_resources/popupmenu.dart)
- contextmenu and rendering popmenu anywhere on screen
[rightclick_simulation.dart](../../../_resources/rightclick_simulation.dart)

75
joplin notion extension/Web Development/Flutter/First app.md Normal file
View file

@ -0,0 +1,75 @@
First app
- StatelessWidget : base class of all the widget
- using const with constructor is recommended if it doesnt change often as it will executed during compile time and this improving performance
```dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SelectableText('hello world'),
));
}
}
```
![04e385c71738cef51c4f0c30e5aa9413.png](../../../_resources/04e385c71738cef51c4f0c30e5aa9413.png)
&nbsp;
**Appbar**
```
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Programming Knowledge'),
backgroundColor: Colors.brown,
bottom: PreferredSize(
preferredSize: Size(12, 24), child: Icon(Icons.add)),
),
body: Center(child: Text("Hello World"))));
}
```
&nbsp;
**Column and Rows**
- These widgets are similar to flex layout in web development
- Column widget is same as flex-column means widgets inside it will be arranged vertically
- to make our widgets center both vertically and horizontally use mainAxisAlignment property of column should be `MainAxisAlignment.center` and if Column widget is taking whole screen then crossAxisAlignment property with `CrossAxisAlignment.center` would work. If column is not taking whole width then in the case wrap whole Column Widget as a value of child property of Center Widget
- Row widget has similar properties like column with difference is that widgets inside it will be arranged horizontally
```dart
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Programming Knowledge'),
backgroundColor: Colors.brown,
bottom: PreferredSize(
preferredSize: Size(12, 24), child: Icon(Icons.add)),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('my name'),
TextButton(
child: Text('Press'),
onPressed: () => print('Pressed'),
style: TextButton.styleFrom(
foregroundColor: Colors.brown,
backgroundColor: Colors.grey,
shape: LinearBorder())),
Text('Programming')
]),
)));
}
```
![6ec7276be266fd10cc77057d9dfc76d1.png](../../../_resources/6ec7276be266fd10cc77057d9dfc76d1.png)

40
joplin notion extension/Web Development/Flutter/Issues.md Normal file
View file

@ -0,0 +1,40 @@
Issues
Maybe these will work
- https://xdaforums.com/t/how-to-enable-full-developer-mode-security-install-without-sim-and-wifi.4501749/
```txt
Many people asked how to do this withoput needing an internet connection, a xiaomi account and the simcard inside the phone.
I am glad to tell you I found a simple way.
In MIUI 13:
Go in developer mode and enable USB debugging (the normal one).
Then go to Privacy Protection >> Special permissions
From this menu select first Modify System Settings then the small more button at the bottom of the page and tap Show System
Scroll down to Shell, tap on it and enable it.
Now go back to Privacy Protection >> Special permissions and
select Install unknown apps >> More >> Show System
Scroll all the way down to Shell andenable Allow from this source
```
- try this
```txt
Alternatively
"These steps worked for me for Redmi 8 Pro. Follow them in the exact same order.
Enable Developer Options.
Settings -> Additional Settings -> Developer Options -> Disable MIUI Optimizations
Reboot Phone
Settings -> Additional Settings -> Developer Options -> Allow USB Debugging
Security (system app) -> Manage apps -> Permissions -> Gear icon (in top right) -> Install via USB (true)
Reboot Phone
Settings -> Additional Settings -> Developer Options -> Enable Install via USB
"
"It will ask for MIUI account. Don't close it and reboot from there. From next run onwards you can install apps either using adb install or via Android Studio."
```

55
joplin notion extension/Web Development/Flutter/Setup.md Normal file
View file

@ -0,0 +1,55 @@
Setup
https://docs.flutter.dev/get-started/install/linux/desktop
- download the flutter sdk bundle
https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.24.4-stable.tar.xz
- Create a folder `~/development/flutter` and extract content of previously downloaded bundle here
`tar -xf ~/Downloads/flutter_linux_3.24.4-stable.tar.xz -C ~/development/`
- in `.bashrc` add this to add in environment variable PATH
`echo 'export PATH="~/development/flutter/bin:$PATH"' >> ~/.bash_profile`
- to check if components of flutter development is installed use `flutter doctor`
- Create sample flutter app with
`flutter create .` at directory where project files will be created
- run it with `flutter run`. to run for specific device in case there r multiple device connected to adb or choose desktop one instead of mobiles then
`flutter run -d <device_id>`.
to list devices use `flutter devices`
&nbsp;
**Android development tools setup**
- these must be installed
```txt
Android SDK Platform, API 35.0.1
Android SDK Command-line Tools
Android SDK Build-Tools
Android SDK Platform-Tools
Android Emulator
```
- refer to for installation of android emulator
[android-sdk-installation.md](../../../_resources/android-sdk-installation.md) or
[Android emulator on linux](../../../joplin%20notion%20extension/Web%20Development/Extras/Android%20emulator%20on%20linux.md)
- enable usb debugging and connect it with usb to check and debug through mobile instead of using emulator
- for wifi debugging do this
https://stackoverflow.com/questions/4893953/run-install-debug-android-applications-over-wi-fi
- Connect the device to the same Wi-Fi as your computer
- Get your device IP address (in Settings → About phone → Status)
- Enable adb over TCP/IP on your device: `adb tcpip 5555`
- Connect to your device: `adb connect DEVICE_IP:5555 (replace DEVICE_IP)`
- Unplug your device
- To switch the server back to the USB mode, run `adb usb` and back to wireless with `adb tcpip 5555`
- to disconnect use
`adb disconnect` : this will disconnect all adb devices
for specific device use
`adb disconnect <device-ip>:<port>`
&nbsp;
for android 11 or newer following can be used too
1. Ensure both your computer and phone are connected to the same Wi-Fi network.
2. On your Android device, go to Settings > System > Developer options and enable Wireless debugging.
3. Select Pair device with pairing code to view your device's IP, port number, and a 6-digit code.On your computer, open your terminal and run `adb pair ip_address:port`. (the port which it shows)
4. Enter the pairing code when prompted
5. now connect too with `adb connect ip_address:port`. this port can be different and will be mentioned there below wireless debugging toggle
ip_address:port examples
`192.168.29.216:37111`

23
joplin notion extension/Web Development/Flutter/Snippets.md Normal file
View file

@ -0,0 +1,23 @@
Snippets
- to have ::after like effect
```dart
Stack(
clipBehavior: Clip.none, // Important: Allow content to extend beyond the Stack's bounds
children: [
ElevatedButton(
onPressed: () { /* ... */ },
child: Text('Button Text'),
),
Positioned(
bottom: -20, // Adjust this value to control the vertical offset
left: 0,
right: 0, // For full width
child: Text(
'Text Below Button',
style: TextStyle(fontSize: 12, color: Colors.grey), // Style as needed
),
),
],
)
```

139
joplin notion extension/Web Development/Flutter/Stateless vs Stateful widgets.md Normal file
View file

@ -0,0 +1,139 @@
Stateless vs Stateful widgets
https://pub.dev/packages
- Stateless widget is similar to pure components and stateful widget is more similar to smart containers in react means Stateless widget is for static widget for no interactivity and stateful contains states too.
- To get more widgets we need to add packages. so go to pub.dev site and find
- To add toast search this package in pub.dev and read through how to install it. Once you add the line in under dependency then use `flutter pub get` which is similar to `npm i` in nodejs.
To avoid entering package info in `pubspec.yaml` directly, `flutter pub add toast` can be used too.
```yaml
dependencies:
flutter:
sdk: flutter
toast: ^0.3.0
```
- As toast is interactive widget so it must be under Stateful widget's state.
```dart
import 'package:flutter/material.dart';
import 'package:toast/toast.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: MyHomePage());
}
}
class MyHomePage extends StatefulWidget {
@override
State<MyHomePage> createState() => _MyHomeAppState();
}
class _MyHomeAppState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
ToastContext().init(context);
return Scaffold(
appBar: AppBar(
title: Text('Programming Knowledge'),
backgroundColor: Colors.brown,
bottom: PreferredSize(
preferredSize: Size(12, 24), child: Icon(Icons.add)),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('my name'),
TextButton(
child: Text('Press'),
onPressed: () {
Toast.show('Toast demo',
duration: Toast.lengthLong,
gravity: Toast.center,
backgroundColor: Colors.cyan,
textStyle: TextStyle(color: Colors.black));
},
style: TextButton.styleFrom(
foregroundColor: Colors.brown,
backgroundColor: Colors.grey,
shape: LinearBorder())),
Text('Programming')
]),
));
}
}
```
&nbsp;
Separation of widgets
in `main.dart`, containing root of widget only
```dart
import 'package:flutter/material.dart';
import './myhomepage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: MyHomePage());
}
}
```
in `myhomepage.dart`
```dart
import 'package:toast/toast.dart';
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
@override
State<MyHomePage> createState() => _MyHomeAppState();
}
class _MyHomeAppState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
ToastContext().init(context);
return Scaffold(
appBar: AppBar(
title: Text('Programming Knowledge'),
backgroundColor: Colors.brown,
bottom: PreferredSize(
preferredSize: Size(12, 24), child: Icon(Icons.add)),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('my name'),
TextButton(
child: Text('Press'),
onPressed: () {
Toast.show('Toast demo',
duration: Toast.lengthLong,
gravity: Toast.center,
backgroundColor: Colors.cyan,
textStyle: TextStyle(color: Colors.black));
},
style: TextButton.styleFrom(
foregroundColor: Colors.brown,
backgroundColor: Colors.grey,
shape: LinearBorder())),
Text('Programming')
]),
));
}
}
```

204
joplin notion extension/Web Development/Flutter/States.md Normal file
View file

@ -0,0 +1,204 @@
States
- Function setState should be in the callback function which would be responsible to increment the counter defined inside callback function of setState
- Instead of using maps of array for loading dynamic widgets we can use for loop too
```dart
class _MyHomePageState extends State<MyHomePage> {
int strength = 0;
int sugars = 0;
@override
Widget build(BuildContext context) {
void incrementStats(String name) {
setState(() {
switch (name) {
case 'Strength':
strength = (strength + 1) % 5;
break;
case 'Sugars':
sugars = (sugars + 1) % 5;
break;
}
}); // end of setState
} // end of incrementStatus function
body : TextButton( child: Text('$strength - $sugars'),
onPressed : ()=>incrementStats('Strength'),
)
}
}
```
**Control flow**
with for loop
```dart
for (int i = 0; i < int.parse('${e['amount']}'); i++)
Image.asset(
'${e['imagePath']}',
width: 25,
color: Colors.brown[200],
colorBlendMode: BlendMode.multiply,
),
```
if statement
```dart
if (int.parse('${e['amount']}') == 0)
Text('No ${e['string']}'),
```
&nbsp;
**Reusable Widgets**
in separate file define its class
```dart
import 'package:flutter/material.dart';
class StyledBodyText extends StatelessWidget {
const StyledBodyText(this.text, {super.key});
final String text;
@override
Widget build(BuildContext context) {
return Text(text,
style: TextStyle(
color: Colors.brown[900],
fontWeight: FontWeight.bold,
fontSize: 18,
));
}
}
class StyledButton extends StatelessWidget {
const StyledButton({
super.key,
required this.onPressed,
required this.child,
});
final Widget child;
final void Function() onPressed;
@override
Widget build(BuildContext context) {
return TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.brown[700],
foregroundColor: Colors.white,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5)),
), // roundedRectangleBorder
),
onPressed: onPressed,
child: child,
);
}
}
```
in our main file
```dart
// for styled text
Container(
width: double.infinity,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(color: Colors.brown[300]),
child: const StyledBodyText('How I like my coffee ..'),
// 'You have pushed the button this many times:',
),
// for styled button
StyledButton(
// style: TextButton.styleFrom(
// backgroundColor: Colors.brown,
// foregroundColor: Colors.white,
// ),
child: Icon(Icons.add),
onPressed: () => incrementStats('${e['string']}'),
),
```
&nbsp;
**Routes**
- https://docs.flutter.dev/cookbook/navigation/named-routes
- https://docs.flutter.dev/cookbook/navigation/navigate-with-arguments
- Consistent Overlay across multiple routes
```dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _showOverlay = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Stack(
children: [
Navigator(
onGenerateRoute: (settings) { // Your routes
return MaterialPageRoute(
builder: (context) {
// Your route/page content
return Scaffold(
appBar: AppBar(title: Text(settings.name ?? 'Home')),
body: Center(child: Text('Page content')),
);
},
);
},
),
if (_showOverlay)
Positioned.fill( // Overlay widget
child: ColoredBox(
color: Colors.black.withOpacity(0.5), // Semi-transparent background
child: Center(
child: ElevatedButton(
onPressed: () {
setState(() => _showOverlay = false);
},
child: Text('Close Overlay'),
),
),
),
),
],
),
);
}
}
```
onGenerateRoute property usecase for routes '/' and '/video'
```dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
onGenerateRoute: (settings) {
switch (settings.name) {
case '/':
return MaterialPageRoute(builder: (context) => HomePage());
case '/video':
return MaterialPageRoute(builder: (context) => VideoPage());
default:
return MaterialPageRoute(
builder: (context) => Scaffold( // Handle unknown routes
body: Center(child: Text('404 - Page Not Found')),
),
);
}
},
);
}
}
```

20
joplin notion extension/Web Development/Flutter/Structure.md Normal file
View file

@ -0,0 +1,20 @@
Structure
https://www.youtube.com/playlist?list=PLS1QulWo1RIa5W8F_XInRJrZLwkLY39oK
- `.dart-tool` : It has basic tool for developer console
- `.idea` : basic configurations for android studio. its idea as android studio is fork of intellij idea
- `android` : files that supports android functionality like to run, build apps for android.
- `build` : hold all output files and generated resources.
- `ios` : like android, it targets ios devices
- Similarly `linux`, `macos` and `windows` to tareget for respecticve devices
- `lib` : Most important folder as it contains source code and contains all dart files
- `test` : test cases for project
- `.metadata` : contains metadata of project
- `analysis_options.yaml` : contains lint rules
- `pubspec.lock` : to lock specfic version of dependencies which is generated from `pubspec.yaml` so very important for stability
- `pubspec.yaml` : it is configuration file and also one of the most imporant file. it contains configs of third party packages, fonts,images,location,etc
&nbsp;
Widgets : Every component in flutter is regarded as widget like text, floating button, heading/label, app bar etc. These all are branches of root widget which is screen which is referred as scafford in flutter. Also all these widgets have their sub widgets too like app bar which have title contains text widget. center widget also have text widget. floating action button has icon widget.
![7342d910f2dc61fc0c63d87ed4936264.png](../../../_resources/7342d910f2dc61fc0c63d87ed4936264.png)

429
joplin notion extension/Web Development/Flutter/Widgets.md Normal file
View file

@ -0,0 +1,429 @@
Widgets
![c6eb4fe9ce57ef13adb62a43fcad45ff.png](../../../_resources/c6eb4fe9ce57ef13adb62a43fcad45ff.png)
**Text**
```dart
body: Center(
child: Text(
'Programming Knowledge\nProgramming Knowledge\nProgramming Knowledge\nProgramming Knowledge',
maxLines: 3,
style: TextStyle(
backgroundColor: Colors.red,
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 30,
fontStyle: FontStyle.italic),
))
```
&nbsp;
**RichText**
- To provide different styling for indivual words in whole string thats why `TextSpan` Widget is used to enclose word for different styling.
```dart
body: Center(
child: RichText(
text: TextSpan(
text: 'Programming',
style: TextStyle(color: Colors.cyan, fontSize: 15),
children: <TextSpan>[
TextSpan(
text: ' Knowledge: ',
style: TextStyle(color: Colors.red, fontSize: 30)),
TextSpan(
text: ' Flutter ',
style: TextStyle(color: Colors.green, fontSize: 20)),
]),
))
```
&nbsp;
**Buttons**
https://docs.flutter.dev/release/breaking-changes/buttons
- The FlatButton, RaisedButton and OutlineButton widgets have been replaced by TextButton, ElevatedButton, and OutlinedButton respectively. Each new button class has its own theme: TextButtonTheme, ElevatedButtonTheme, and OutlinedButtonTheme. The original ButtonTheme class is no longer used.
&nbsp;
**ElevatedButton**
- buttons which are little elevated and when we hold it it gets flat.
- in following if onPressed is assingned null then button is disabled and color will be orange instead of red
```dart
body: Center(
child: ElevatedButton(
onPressed: () => print('button pressed'),
// onPressed: null,
child: Icon(Icons.add),
style: ElevatedButton.styleFrom(
foregroundColor: Colors.white,
backgroundColor: Colors.red,
elevation: 10,
disabledBackgroundColor: Colors.orange,
)))
```
![097ea2e49a5653134efdf96520aeec4d.png](../../../_resources/097ea2e49a5653134efdf96520aeec4d.png)
&nbsp;
OutlinedButton
- button having a property related to borders where we can customize it as much as we want
- to remove border, style property of BorderSide widget should be `BorderStyle.none`
```dart
body: Center(
child: OutlinedButton(
onPressed: () => print('button pressed'),
child: Icon(Icons.add),
style: OutlinedButton.styleFrom(
side: BorderSide(
color: Colors.red, width: 5.0, style: BorderStyle.solid),
)))
```
![28c2b61713696f74be557f4c8da73a95.png](../../../_resources/28c2b61713696f74be557f4c8da73a95.png)
&nbsp;
**TextButton**
```dart
body: Center(
child: TextButton(
child: Icon(Icons.add),
onPressed: () => print('flatbutton pressed'),
// onPressed: null,
style: TextButton.styleFrom(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
disabledBackgroundColor: Colors.cyan,
),
onLongPress: () => print('button is pressed for long time'),
))
```
![52f67f89112c7000e4a9101645d40bfb.png](../../../_resources/52f67f89112c7000e4a9101645d40bfb.png)
&nbsp;
**IconButton**
- overlaycolor is a replacement of splash colour. with this there is a animation of overlay translucent color spashing from point of click to others like water
- earlier there was tooltip property but now to add tooltip, wrap button inside tooltip.
```dart
body: Center(
child: Tooltip(
message: 'description of the button',
child: IconButton(
icon: Icon(Icons.add),
onPressed: () => print('iconbutton pressed'),
style: IconButton.styleFrom(
backgroundColor: Colors.red,
iconSize: 40.0,
// splashFactory:
overlayColor: Colors.black,
padding: EdgeInsets.all(20.0),
)),
))
```
&nbsp;
**Ink class**
- A convenience widget for drawing images and other decorations on Material widgets so that InkWell and InkResponse splashes will render over them.
- As can be seen from the image, the rounded rectange button is actual button and is clickable area and ink is the circle
- color property can be either inside Ink widget or under ShapeDecoration but it can be only in one of them and if there is ShapeDecoration then it cannot be under Ink one and only in ShapeDecoration.
```dart
body: Center(
child: Ink(
decoration: ShapeDecoration(
shape: CircleBorder(),
// shape: StarBorder(),
// shape: BeveledRectangleBorder(),
color: Colors.blue,
),
// height: 60,
width: 115,
padding: EdgeInsets.symmetric(vertical: 45),
child: IconButton(
icon: Icon(Icons.android),
onPressed: () => print('iconbutton of ink pressed'))))
```
![5cb5a2e8a625f063081e5bead03ef547.png](../../../_resources/5cb5a2e8a625f063081e5bead03ef547.png)
&nbsp;
FloatingActionButton and extended feature
- We can have text and icon both in FloatingActionButton by using Row widget but its not the best case if its content inside is dynamic bcz fixed width needs to be protected.
- Colors.colorname ie MaterialColor property also have color darkness numbers too from 100 to 1000. by default its 500. 100 is lightest and 1000 is darkest.
- with icon method of ElevatedButton, we can have label too
```dart
body: Center(
child: ElevatedButton.icon(
onPressed: () => print('ElevatedButton.icon pressed'),
icon: Icon(Icons.android),
label: Text('Android'),
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
),
), // Center
floatingActionButton: Container(
width: 100,
child: FloatingActionButton(
onPressed: () => print('FAB pressed'),
clipBehavior: Clip.hardEdge,
// shape: RoundedRectangleBorder(),
// shape: CircleBorder(),
shape: StadiumBorder(),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[Icon(Icons.add), Text('Android')],
),
backgroundColor: Colors.red[600],
tooltip: 'ToolTip FAB',
),
)
```
- For dynamic length and to contain whatever inside it use
- inkwell is rectangular area of material that is responsive to touch
- material is widget that creates a piece of material.
```dart
floatingActionButton: Material(
color: Colors.red[600], // Set the background color
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30), // Rounded corners
),
// shape: CircleBorder(),
clipBehavior: Clip.hardEdge,
child: InkWell(
onTap: () => print('FAB pressed'),
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 16, vertical: 12), // Adjust padding to fit content
child: Row(
mainAxisSize: MainAxisSize
.min, // Ensure the row only takes as much space as necessary
children: [
Icon(Icons.add), // The icon
SizedBox(width: 8), // Space between icon and text
Text('Android'), // The text
],
),
),
),
),
```
- just like .icon there is .extended for FloatingActionButton to add support for label
```dart
floatingActionButton: FloatingActionButton.extended(
label: Text('Add'),
icon: Icon(Icons.add),
onPressed: () => print('FAB pressed'),
backgroundColor: Colors.red[500],
tooltip: 'Tooltip',
)
```
![6ff7a61bc8763760d8b228208bbfb07f.png](../../../_resources/6ff7a61bc8763760d8b228208bbfb07f.png)
&nbsp;
**Container and Padding**
- Its a convenience widget that combines multple properties for widgets inside it
- The container in Flutter is a parent widget that can contain multiple child widgets and manage them efficiently through width, height, padding, background color, etc.
- Container is a Single-child layout widget. But it can have multiple children by using a Multi-child layout widget as its child.
https://docs.flutter.dev/development/ui/widgets/layout#Multi-child%20layout%20widgets
- in case of BoxConstaints widget, maxheight cant be less that minheight
- Padding is a conviennance widget of Container so we can replace Container with Padding if we need to use padding property only
part 1
```dart
body: Center(
child: Container(
// color: Colors.red,
padding: const EdgeInsets.only(
left: 10.0,
right: 20.0,
top: 30.0,
bottom: 40.0,
),
decoration: BoxDecoration(
color: Colors.red,
),
child: Text('Programming Knowledge'))),
```
part 2
```dart
body: Center(
child: Container(
// color: Colors.red,
// padding: const EdgeInsets.only(
// left: 10.0,
// right: 20.0,
// top: 30.0,
// bottom: 40.0,
// ),
constraints: BoxConstraints(maxHeight: 300, minHeight: 100.0),
width: double.infinity,
height: double.infinity,
padding: const EdgeInsets.all(10.0),
margin: const EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.red,
// shape: BoxShape.circle,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text('Programming Knowledge',
textAlign: TextAlign.center)))),
```
![88ca8820e6b0ebb8e7495d5ddd8f1cf7.png](../../../_resources/88ca8820e6b0ebb8e7495d5ddd8f1cf7.png)
&nbsp;
**ImageAssets with Frame Builder**
- Before using assets we need to configure it in `pubspec.yaml`
```yaml
# The following section is specific to Flutter packages.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
# - assets/20241110_122305.jpg
- assets/
```
then
```dart
body: Image.asset('assets/20241110_122305.jpg', height: 100.0, width: 50,
frameBuilder: (
// buildcontext returns parent context
BuildContext context,
// represents image
Widget child,
// frameindex, useful for gif and videos as framerate is changing
int? frame,
bool wasSynchronouslyLoaded,
) {
return Container(
padding: const EdgeInsets.all(100),
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
child: child,
);
},
),
```
- framebuilder is a container around image anyway. in order to not use it do following
```dart
body: Center(
child: Container(
padding: const EdgeInsets.all(100),
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
child: Image.asset(
'assets/20241110_122305.jpg',
height: 100.0,
width: 50,
),
),
),
```
![a706b53e056d4983c9411a8a07830fb7.png](../../../_resources/a706b53e056d4983c9411a8a07830fb7.png)
&nbsp;
**All about images**
- fit : like in html cover,fill values
https://api.flutter.dev/flutter/painting/BoxFit.html
```dart
body: Container(
height: double.infinity,
width: double.infinity,
child: Image.asset(
'assets/20241110_122305.jpg',
// fit: BoxFit.cover,
// fit: BoxFit.fill,
fit: BoxFit.scaleDown,
// fit: BoxFit.fitWidth,
// fit : BoxFit.fitHeight
),
),
```
Different fits
Fill
![d725d061711e3414355818e78bbb8b5b.png](../../../_resources/d725d061711e3414355818e78bbb8b5b.png)
Cover and fitWidth
![a5f845ee2814638022142ba0d085e9f2.png](../../../_resources/a5f845ee2814638022142ba0d085e9f2.png)
ScaleDown and fitHeight
![49447b505b41eded9c94a9bff174947d.png](../../../_resources/49447b505b41eded9c94a9bff174947d.png)
&nbsp;
**Expanded Widget**
- to take the rest of space
```dart
Expanded(
flex : 2,
child : Image.asset('asset/img/coffee_bg.jpg',
fit : BoxFit.fitWidth,
alignment: Alignment.bottomCenter,
)
)
```
https://www.flutterbeads.com/flutter-widget-size-in-percentage/ : for alternatices of expanded
&nbsp;
**SingleChildScrollView Widget**
- to have scrollbar
- in order to use it for partilcular container make sure that container once wrapped by SingleChildScrollView must also be wrapped by expanded something to allow to expand itself for more width/height.
```dart
body: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 1,
child: Center(
child: Videoplayer(
url:
'https://user-images.githubusercontent.com/28951144/229373720-14d69157-1a56-4a78-a2f4-d7a134d7c3e9.mp4'),
),
),
lyrics != null
? Expanded(
flex: 1,
child: Container(
// height: 200,
margin:
EdgeInsets.symmetric(horizontal: 16, vertical: 32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(bottom: 20),
child: Text('Lyrics',
// textAlign: TextAlign.end,
textAlign: TextAlign.left,
style: TextStyle(
color: Theme.of(context)
.colorScheme
.inversePrimary,
fontSize: 20,
// backgroundColor: Colors.grey,
)),
),
// Scrollable part with a single Text widget
Expanded(
child: SingleChildScrollView(
child: Text(
lyrics,
// style: TextStyle(fontSize: 16),
),
),
),
])),
)
: Container(),
],
),
```

30
joplin notion extension/Web Development/Flutter/tips.md Normal file
View file

@ -0,0 +1,30 @@
tips
- for making column elements take whole space horizontally use this
`crossAxisAlignment: CrossAxisAlignment.stretch`
- in buttons to remove the splash and modify other aspects to it
```dart
TextButton(
style: TextButton.styleFrom(
splashFactory: NoSplash.splashFactory,
overlayColor: Colors.grey,
shape: BeveledRectangleBorder(),
),
)
```
- conditional inline widgets
[conditional widgets.txt](../../../_resources/conditional%20widgets.txt)
- in flutter if there is issue in version imcompability like this
```txt
Execution failed for task ':path_provider_android:compileDebugJavaWithJavac'.
> Could not resolve all files for configuration ':path_provider_android:androidJdkImage'.
```
then
1 .inside android/settings.gradle, change id "com.android.application" to version "8.7.1" apply false
image
2. in gradle-wraper.properties, change distributionUrl to https://services.gradle.org/distributions/gradle-8.9-all.zip
- passing callback from child to parent
use callback function as state of parent, pass the function which can change callback by taking to parameter to child and in child widget update the callback function of parent state.
eg: `VoidCallback? takeScreenShot;`
- sorting files with date modified
https://stackoverflow.com/questions/70225891/how-to-sort-list-of-file-in-order-of-latest-to-oldest