Scribd
Upload
107 views10 pages

Flutter: Widgets

The document provides examples and descriptions of common Flutter widgets including Text, Container, RaisedButton, Image, Icon, Scaffold, AppBar, and how to use SQLite database in Flutter apps. It includes tips on using RaisedButton, dependencies needed for SQLite, and how to navigate between screens using the Navigator.

Uploaded by

pop
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
107 views10 pages

Flutter: Widgets

The document provides examples and descriptions of common Flutter widgets including Text, Container, RaisedButton, Image, Icon, Scaffold, AppBar, and how to use SQLite database in Flutter apps. It includes tips on using RaisedButton, dependencies needed for SQLite, and how to navigate between screens using the Navigator.

Uploaded by

pop
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 10

Flutter

Widgets

TEXT()

 style : TextStyte()
 textAling : TextAling.'direction'

Example 1

Center(
child: Container(
height: 200.0,
width: 200.0,
child: Text(“This is a text”),
),
);
Container()

 with: double.infity 'take the full with '


 margin : EdgeInsets.' type of']
 height:
 decorations: BoxDecoration(border: Border.' ',)

Example 1

Center(
child: Container(
decoration: BoxDecoration(border: Border.all()),
height: 200.0,
width: 200.0,
),
);
RaiseButton

 Color: Colors.''
 textColor : Colors.''

Example 1

Center(
child: Container(
height: 200.0,
width: 200.0,
child: RaisedButton(
onPressed: () => print("on pressed"),
child: Text("BUTTON"),
color: Colors.blue,
),
),
);

Tips :

 The suggestion is to use RaisedButton to add dimension in otherwise mostly flat layouts.
 I would recommend not using such a button in a dialog or a card.
Image

 Image.'depeons where the picture is'

Example 1)

Center(
child: Container(
height: 200.0,
width: 200.0,
child: Image.network(
"https://flutter.io/images/flutter-mark-square-100.png"),
),
);
Icon

 Icon(Icons.flag)

Scaffold

Scaffold is a basic layout structure based on material design. In practice, if you use material
design, every screen of your app will have a Scaffold as its base. The Scaffold widget is
used for showing drawers, snackbars, bottomsheets, floating-action buttons, and so on, by
offering APIs. To display a snackbar or a bottomsheet, you must use Scaffoldstate for
the current context. We can use it via Scaffold.of and use
the ScaffoldState.showSnackbar function.
Example 1

Center(
child: Container(
height: 200.0,
width: 200.0,
child: RaisedButton(
onPressed: () {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text("HELLO!"),
));
},
child: Text("BUTTON"),
color: Colors.blue,
),), );
AppBar

The property that's used for AppBar is Scaffold.appBar. It looks as follows:


SQLite

1. Add Dependencies
a. sqflite : any
b. path_provider : any
c. intl: ^0.15.7 - > always search the last one

Tips : those dependencies have to have just two space to avoid an error

How it works
Extra

diferent constructores uing the name of the class plus dot - > people.'name of constructor'() and change
the usability of the class

Navigator.push(context, MaterialPageRoute(builder: (context) {

return NoteDetail(title);

}));

WillPopScope

You might also like