06.Flutter - Basic Widget 2 [Icon, Button]


Icon

Widget icon digunakan untuk membuat icon dengan material icon yang sudah ada pada flutter, icon tersebut tersedia dalam kelas "Icons", kita dapat menentukan ukuran dan warna icon tersebut. Berikut adalah contoh icon tersebut


Berikut adalah kode programmnya :

import 'package:flutter/material.dart';

void main() => runApp(new IconApp());

class IconApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeWidget(),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Row row1 = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Icon(Icons.add),
        Text("Default Size 24, default color black")
      ],
    );

    Row row2 = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[Icon(Icons.search), Text('Search...')],
    );

    return Scaffold(
      appBar: AppBar(title: Text("Icons")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          row1,
          row2,
        ],
      ),
    );
  }
}

Icon yang kita buat, bisa juga kita ubah ukurannya dengan parameter 'size' pada widget Icon,  ukuran default dari icon adalah 24 perhatikan potongan kode berikut:

children: <Widget>[
  Icon(Icons.add, size: 48),
  Text("Default Size 24, default color black")
],

Buttons


Flutter memiliki berbagai jenis widget button, yaitu:

FlatButton - material

Button ini tidak memiliki border, misalnya pada toolbar, atau menu, dan jika di klik maka background flash nya akan kelihatan.

RaisedButton - Material

Button ini digunakan jika button yang kita buat ingin terlihat, flash sahdow akan muncul ketika di click

IconButton - Material

Flash background berbentuk lingkaran akan terlihat ketika button di klik.

OutlineButton - Material

Button dengan border (tepi) lebih tebal dan backgroundnya menjadi tidak terlihat (opaque) pada saat di klik.

DropdownButton - Material

Button ini digunakan untuk melakukan pemilihan, menunjukkan menu pada saat di klik.

BackButton

Widget IconButton diperukan untuk mengunakan button ini, flash background berbentuk linkaran pada saat button ini diclick.

CloseButton

Widget IconButton diperlukan untuk menggunakan button ini di dikonten apapu yang bisa ditutup.

FloatingActionButton - Material

Sebuah tombol yang terletak mengambang (hover) diatas konten, disarankan digunakan sekali saja, dapat mengganti warna background dan foregroundnya, kita dapat menggunakan nama konstruktor 'extended' untuk membuat button ini menjadi lebih besar dan lebar.

FloatingActionButton.extended (
  onPressed: () {},
  icon: Icon(Icons.save),
  label: Text("Save"),
)

Kita dapat membuat button tersedia (enable) dan tidak tersedia (disable) dengan menggunakan metode "OnPressed", memberikan nilai null ke metode tersebut akan membuat button menajdi disable, perhatikan potongan kode berikut:

OutlineButton(
  onPressed: null,
  child: Text('Register'),
)

Berikut adalah kode lengkap dari demo button pada flutter:

import 'package:flutter/material.dart';

void main() => runApp(new IconApp());

class IconApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeWidget(),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Row flatButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        FlatButton(
          child: Text('Saya FlatButton'),
          onPressed: () => debugPrint('FlatButton di tekan'),
        )
      ],
    );

    Row raisedButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
          child: Text('RaisedButton'),
          onPressed: () => debugPrint('RaisedButton di tekan'),
        )
      ],
    );

    Row iconButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.send),
          onPressed: () => debugPrint('IconButton Ditekan'),
        )
      ],
    );

    Row outlineButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        OutlineButton(
          child: Text('OutlineButton'),
          onPressed: () => debugPrint('OutlineButton ditekan'),
        )
      ],
    );

    Row dropdownButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        DropdownButton<String>(
          items: <String>['Laki-Laki', 'Perempuan'].map((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
          onChanged: (value) => debugPrint('Changed: ${value}'),
        ),
        Text('DropdownButton')
      ],
    );

    Row backButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[BackButton(), Text('Back')],
    );

    Row closeButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        CloseButton(),
        Text('Close'),
      ],
    );

    return Scaffold(
      appBar: AppBar(title: Text("Icons")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          flatButton,
          raisedButton,
          iconButton,
          outlineButton,
          dropdownButton,
          backButton,
          closeButton
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => debugPrint('Floating Action Button ditekan'),
      ),
    );
  }
}

06.Flutter - Basic Widget 2 [Icon, Button] 06.Flutter - Basic Widget 2 [Icon, Button] Reviewed by jc on July 29, 2019 Rating: 5

No comments:

Powered by Blogger.