05.Flutter - Basic Widget 1 [ Text & Image ]

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',
        ),
      ),
    );
  }
}