https://github.com/onnesok/flutter_demo
Examples of flutter. Basic examples for beginner.
https://github.com/onnesok/flutter_demo
app dart flutter flutter-examples
Last synced: 4 months ago
JSON representation
Examples of flutter. Basic examples for beginner.
- Host: GitHub
- URL: https://github.com/onnesok/flutter_demo
- Owner: Onnesok
- Created: 2023-06-28T07:12:30.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-08-30T18:55:36.000Z (almost 2 years ago)
- Last Synced: 2025-01-05T00:44:45.034Z (5 months ago)
- Topics: app, dart, flutter, flutter-examples
- Language: Dart
- Homepage:
- Size: 321 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Authors
- [@Onnesok](https://www.github.com/Onnesok)
## Badges
[](https://choosealicense.com/licenses/mit/)
# Flutter app dev demo
This covers some example code for Flutter framework by google using dart programming language.
## Code topics
- Flutter structure
- Scaffold and app bar widgets
- Colors and Text/add fonts
- Stateless widgets and hot reload
- Image assets from network and assets
- Buttons and icons
- containers and padding
- Rows
- Colums
- Flutter outline and shortcuts
- Expanded widgets
- build an app ui
- Stateful widgets
## Flutter architecture
## Remove annoying green line from android studio sdk
Before starting lets Remove These annoying lines before every widgets.....
open ``` analysis_options.yaml``` and scroll down.
[See this for example](https://github.com/Onnesok/flutter_demo/blob/master/analysis_options.yaml)
after rules paste this code
```
prefer_const_constructors : false
```
## Scaffold and app bar
Root files of an app
```
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter by ratul'),
centerTitle: true,
backgroundColor: Colors.red[400],
), //AppBar <--
body: Center(
child:Text('hello flutter'),
), //Center <--
), // Scaffold <--
)); // MaterialApp <--
}
```
## Text colors and styling
Inside text widgets I've done some styling
```
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter by ratul'),
centerTitle: true,
backgroundColor: Colors.red[400],
),
body: Center(
child: Text('Hello there this is body',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
letterSpacing: 2,
color: Colors.amber[400],
),
),
),
),
));
}
```
# Now lets import custom fonts
For example I've used ```https://fonts.google.com/``` to download fonts
To import fonts download and make a directory in project called fonts and paste (Downloaded_fonts).ttf file.
Edit this part of pubspec.yaml file -->
To uncomment``` ctrl+/ ```
To reverse back ```shift+tab ```
use ```shift+tab``` two times & then tab one time to allign properly
``` fontFamily: 'IndieFlower', ```
pubspec.yaml changed code -->
``` fonts:
- family: IndieFlower
fonts:
- asset: fonts/IndieFlower-Regular.ttf
- family: Bruno
fonts:
- asset: fonts/BrunoAceSC-Regular.ttf
```
## Stateless widgets and hot reload
Tired of reloading again and again. So do Stateless widgets
To build the class with android studio use this shortcut ``` stless ``` and class will be created. Example::::
```
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter by Ratul'),
centerTitle: true,
backgroundColor: Colors.red[400],
),
body: Center(
child: Text('Hello there this is body',
style: TextStyle(
fontSize: 20,
fontFamily: 'IndieFlower',
fontWeight: FontWeight.bold,
letterSpacing: 2,
color: Colors.amber[400],
),
),
),
);
}
}
```
``` ctrl + s ``` to auto run and save
## Image assets from network and assets
For network image
```
Image(
image: NetworkImage('https://img-9gag-fun.9cache.com/photo/arox7VX_460s.jpg'),
),
```
For asset (image pubesc.yaml change code here) <--
```
Image(
image: AssetImage('assets/hmm.jpg'),
),
```
shortcut
```
Image.asset('assets/hmm.jpg'),
```
## Buttons and icons
so now lets create some buttons to press hudai for no reason.... less gooo...
Here's some examples of button codes.....
OutlinedButton
```
OutlinedButton(
onPressed: (){},
child: Text('outlined button', style: TextStyle(
letterSpacing: 2,
fontWeight: FontWeight.bold,
fontSize: 30,
),),
),
```
FilledButton
```
FilledButton(
onPressed: () {
print('guta kn dili');
},
child: Text('filled button'),
),
```
ElevatedButton
```
ElevatedButton(
onPressed: () {
print('guta kn dili');
},
child: Text('Elevated button'),
),
```
MaterialButton
```
MaterialButton(
onPressed: () {},
child: Text('ok'),
),
```
FloatingActionButton
```
FloatingActionButton(
onPressed: () {},
child: Text('f'),
),
```
IconButton
```
IconButton(
onPressed: () {},
icon: Icon(
Icons.mail,
),
color: Colors.amber,
iconSize: 40,
),
```
ElevatedButton with icon
```
ElevatedButton.icon(
onPressed: () {
print('guta kn dili ');
},
icon: Icon(Icons.mail, color: Colors.red[400],),
label: Text('mail me',
style: TextStyle(
color: Colors.green,
fontFamily: 'Bruno',
fontSize: 15,
),
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.amber,
),
),
```
## containers and padding
we can add padding, margins and unga bunga for containers
Example::
```
Container(padding: EdgeInsets.all(20),
margin: EdgeInsets.all(20),
color: Colors.blueAccent,
child: Text('container'),
),
```
padding is the birer part
margin is the vitorer part
we use ``` EdgeInsets.all ``` or ``` EdgeInsets.fromTRB ``` or something like this to use margin or padding for our needs....
## Rows
For multiple widgets entry in row wise we use rows widget.
Example:::
```
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(30),
color: Colors.green,
child: Text('one'),
),
Container(
padding: EdgeInsets.fromLTRB(20, 40, 20, 40),
margin: EdgeInsets.all(20),
child: Text('two'),
decoration: BoxDecoration(
color: Colors.red,
border: Border.all(
color: Colors.purpleAccent,
width: 10,
),
),
),
Container(
padding: EdgeInsets.fromLTRB(20, 50, 20, 50),
color: Colors.amber,
margin: EdgeInsets.all(20),
child: Text('three'),
),
],
),
```
mainAxisAlignment means align in horizontally as horizontal is the main axis for row.
Oposite for the crossAxisAlignment.
## Colum
```
Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(30),
color: Colors.green,
child: Text('one'),
),
Container(
padding: EdgeInsets.fromLTRB(20, 40, 20, 40),
margin: EdgeInsets.all(20),
child: Text('two'),
decoration: BoxDecoration(
color: Colors.red,
border: Border.all(
color: Colors.purpleAccent,
width: 10,
),
),
),
Container(
padding: EdgeInsets.fromLTRB(20, 50, 20, 50),
color: Colors.amber,
margin: EdgeInsets.all(20),
child: Text('three'),
),
],
),
```
## Flutter outline and shortcuts
Hover mouse over a function and a light bulb will appear. When press the bulb life jinga dala. You can wrap, remove or replace widgets with any other widgets without writing any code again.
Next on the right side there is a menu called flutter outline. open it. it will show nothing. Then press ``` ctrl + function that I wanna see ``` and then it will show full flutter tree there.
```
Center(
child: Padding(
padding: EdgeInsets.all(60), //It's mainly mergins space
child: Container(
padding: EdgeInsets.all(30), // it's paddding or inside space
color: Colors.amber,
child: Text('helloo theee'),
),
),
),
```
we can use direct padding to for padding without a container.
## Expanded widgets
For me if I forget
```
Row(
children: [
Container(
padding: EdgeInsets.all(20),
color: Colors.red,
child: Text('one'),
),
Container(
color: Colors.green,
padding: EdgeInsets.all(50),
margin: EdgeInsets.all(20),
child: Text('two'),
),
Container(
color: Colors.amber,
padding: EdgeInsets.all(70),
child: Text('three'),
),
],
),
```
Expanded widgets expands duh ( :| )
```
Row(
children: [
Expanded(
flex: 4,
child: Image.asset('assets/hmm.jpg')
),
Expanded(
flex: 10,
child: Container(
padding: EdgeInsets.all(30.0),
color: Colors.red,
child: Text('one'),
),
),
Expanded(
flex: 4,
child: Container(
color: Colors.green,
padding: EdgeInsets.all(30.0),
child: Text('two'),
),
),
Expanded(
flex: 5,
child: Container(
color: Colors.amber,
padding: EdgeInsets.all(30.0),
child: Text('three'),
),
),
],
),
```
here in ```flex: 3 ``` flex means we can set the width any container will take. 3 means here it will take 3 portion of it's width.
without flex everything will take same space.
## Simple app design
Lets do a simple app
```
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[900],
appBar: AppBar(
title: Text('Flutter by Ratul'),
centerTitle: true,
backgroundColor: Colors.black54,
elevation: 0, // removes the drop shadow from appbar
),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: CircleAvatar(
backgroundImage: AssetImage('assets/hmm.jpg'),
radius: 40,
),
),
Divider(
height: 60,
color: Colors.grey[800],
),
Text(
'NAME',
style: TextStyle(
color: Colors.grey,
letterSpacing: 2,
),
),
SizedBox(
height: 10,
),
Text(
'Ratul Hasan',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.amberAccent,
),
),
SizedBox(
height: 30,
),
Text(
'Company Name',
style: TextStyle(
color: Colors.grey,
letterSpacing: 2,
),
),
SizedBox(
height: 10,
),
Text(
"Onnesok",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.amberAccent,
),
),
SizedBox(
height: 30,
),
Row(
children: [
Text(
'Email Developer :',
style: TextStyle(
color: Colors.grey,
letterSpacing: 2,
),
),
SizedBox(
width: 15,
),
ElevatedButton.icon(
onPressed: () {},
icon: Icon(
Icons.mail,
color: Colors.red,
),
label: Text(
'Email me',
style: TextStyle(
color: Colors.black87,
letterSpacing: 2,
),
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.amberAccent,
),
),
],
),
SizedBox(height: 15,),
Row(
children: [
Text(
'Mail Address:',
style: TextStyle(
letterSpacing: 2,
color: Colors.grey,
),
),
SizedBox(width: 10,),
Text(
'[email protected],',
style: TextStyle(
letterSpacing: 2,
color: Colors.red[400],
),
)
],
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
print('guta dis na sagol');
},
child: Text('hehe'),
),
);
}
}
```
## Stateful widget
```
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State createState() => _HomeState();
}
class _HomeState extends State {
int count = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[900],
appBar: AppBar(
title: Text('Flutter by Ratul'),
centerTitle: true,
backgroundColor: Colors.black54,
elevation: 0, // removes the drop shadow from appbar
),
body: Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: CircleAvatar(
backgroundImage: AssetImage('assets/hmm.jpg'),
radius: 40,
),
),
Divider(
height: 60,
color: Colors.grey[800],
),
Text(
'NAME',
style: TextStyle(
color: Colors.grey,
letterSpacing: 2,
),
),
SizedBox(
height: 10,
),
Text(
'Ratul Hasan',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.amberAccent,
),
),
SizedBox(
height: 30,
),
Text(
'Company Name',
style: TextStyle(
color: Colors.grey,
letterSpacing: 2,
),
),
SizedBox(
height: 10,
),
Text(
"Onnesok",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.amberAccent,
),
),
SizedBox(
height: 30,
),
Row(
children: [
Text(
'Email Developer :',
style: TextStyle(
color: Colors.grey,
letterSpacing: 2,
),
),
SizedBox(
width: 15,
),
ElevatedButton.icon(
onPressed: () {},
icon: Icon(
Icons.mail,
color: Colors.red,
),
label: Text(
'Email me',
style: TextStyle(
color: Colors.black87,
letterSpacing: 2,
),
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.amberAccent,
),
),
],
),
SizedBox(height: 15,),
Row(
children: [
Text(
'Mail Address:',
style: TextStyle(
letterSpacing: 2,
color: Colors.grey,
),
),
SizedBox(width: 10,),
Expanded(
child: Text(
'[email protected]',
style: TextStyle(
letterSpacing: 2,
color: Colors.red[400],
),
),
),
],
),
SizedBox(height: 40,),
Center(
child: Expanded(
child: Text(
'$count',
style: TextStyle(
letterSpacing: 2,
color: Colors.green[400],
fontSize: 50,
fontFamily: 'IndieFlower',
),
),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
count+=1;
});
},
child: Icon(
Icons.add,
color: Colors.black87,
),
),
);
}
}
```
type ``` stf ``` and it will create a Stateful class for you. Inside the widget declare variable and kaj kor.
to set state we have to use anaother widget called setState widget. It does unga bunga change inside the code or changes state.
[Code here](https://github.com/Onnesok/flutter_demo/blob/master/example%20files/stateful%20widget%20code.dart)
But if you build and rul the release version of the app then there will be a white screen at the bottom which is not good right...! also things won't work. So to solve this remove expanded widget which is wraping ```$count```.
There you go.... problem solved...
# Next
This file is getting big.
So, here's the next part.
[Next part](https://github.com/Onnesok/flutter_demo/blob/master/readme%20files/readme2.md.md)