Text
Widget Text digunakan untuk menampilkan suatu teks/kalimat/kata/tulisan dengan single style, teks juga dimungkinkan lebih dari 1 baris, untuk memberikan style (memperindah) tulisan secara keseluruhan gunakan property 'style' pada konstruktor widget Text, untuk memberikan style per-bagian dari text gunakan child TextSpans, perhatikan contoh berikut ini:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo Style Teks',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Style Text'),
);
}
}
class TextBlock {
final Color _color;
final String _text;
TextBlock(this._color, this._text);
String get text => _text;
Color get color => _color;
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _index = 0;
final List<TextBlock> textBlocks = [
TextBlock(Colors.red, 'Saya'),
TextBlock(Colors.redAccent, ' Belajar Dart'),
TextBlock(Colors.green, '\nSetiap Hari'),
TextBlock(Colors.greenAccent, '\nBelajar Flutter Dart'),
TextBlock(Colors.blue, '\nSangat Menyenangkan'),
TextBlock(Colors.blueAccent, '\nDan Sangat Mudah')
];
void _incrementCounter() {
setState(() {
if (_index < textBlocks.length) {
_index++;
}
});
}
@override
Widget build(BuildContext context) {
final List<TextSpan> textSpans = List<TextSpan>();
for (var i = 0; i < _index; i++) {
TextBlock tblock = textBlocks[i];
textSpans.add(
TextSpan(
text: tblock.text,
style: TextStyle(color: tblock.color, fontSize: 48.0),
),
);
}
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text.rich(
TextSpan(children: textSpans),
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Image
Widget untuk menampilan gambar adalah Image, Ketika kita ingin menampilkan sebuah gambar, kita menentukan sumber gambar tersebut pada konstruktornya:
- asset- network
- file
- memory
(Image.asset | Image.network | Image.file | Image.memory)
Penggunan widget Image tidak akan menampilkan apapun pada saat widget tersebut mengambil gambar, dan jika gambar sudah didapat maka langsung ditampilkan, jika kita ingin memberikan informasi tambahan seperti tulisan 'loading image...' ketika gambar sedang diambil maka kita perlu membungkus Widget Image dengan widget FadeInImage. Widget Image juga mempunyai property fit yang memungkinkan developer untuk menentukan bagaimana sebuah gambar cocok (fitted) pada area yang tersedia, fit property ini juga berpengaruh pada tampilan gambar tersebut, lihat dokumentasi kelas BoxFit https://docs.flutter.io/flutter/painting/BoxFit-class.html
Berikut adalah contoh program untuk menampilkan sebuah gambar.
Langkah 1
- Buat sebuah project baru, lihat disini.Langkah 2
- Download image animasi yang akan kita gunakan disini.- Buat sebuah folder 'assets' didalam project yang kita buat.
- Simpan image animasi yang telah kita download dengan nama loading.gif
Langkah 3
- Buka file pubspec.yaml dan tambahkan kode tepat dibawah perintah berikut:# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
Tambahkan
assets:
- assets/loading.gif
Langkah 4
Buka file main.dart pada folder lib/, dan gantilah dengan kode berikut:import 'package:flutter/material.dart';
void main() => runApp(LoadingImageApp());
class LoadingImageApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeWidget(),
);
}
}
class HomeWidget extends StatelessWidget {
HomeWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Image"),
),
body: Center(
child: FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'https://lh3.googleusercontent.com/-LOHFjQFuYTk/T8nKcDAai8I/AAAAAAAAAVM/XLcYmv725Hck7WYJgGMnoHRs4BjWMF_dgCEwYBhgL/w139-h140-p/komputer.jpg',
),
),
);
}
}
05.Flutter - Basic Widget 1 [ Text & Image ]
Reviewed by jc
on
July 25, 2019
Rating:
![05.Flutter - Basic Widget 1 [ Text & Image ]](https://1.bp.blogspot.com/-XDeDKeFXOU8/XSw_sZBXjqI/AAAAAAAAA90/6mdl20RtLZs6OSnzpTMjuRciED1It_xlwCLcBGAs/s72-c/flutter-logo-basic-widget.png)
No comments: