[Flutter][32] Terinspirasi dari HTML/CSS, Widget dengan Division Package

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Tuesday, 25 Jun 2019

Hello world,

Bulan Juni ini akhirnya dirilis sebuah package dari flutter yang fungsinya terinspirasi dari struktur HTML/CSS yaitu package Division. Pada Division memiliki komponen yang hampir mirip dengan HTML/CSS yaitu ada style yang berkaitan dengan styling, gesture yang berkaitan dengan action dan child sebagai isi kontennya. Adanya package ini membuat programmer semakin mudah dalam membuat desain app. Strukturnya adalah sebagai berikut:

Division(style: [], gesture: [], child: Widget);

Langkah 1 : Instalasi 

Masukkan dependensi ini ke dalam file pubspec.yaml

dependencies:
  division: ^0.1.0+3

Langkah 2 : Import

Masukkan kode berikut ke dalam file dart kalian.

import 'package:division/division.dart';

Setelah itu kita sudah dapat menggunakan package division dalam aplikasi kita. Sebagai contoh di bawah ini kita gunakan contoh sederhana dari penggunaan division. 

import 'package:division/division.dart';
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Halamandivision(),
));
}

class Halamandivision extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Division"),
),
body: Division(
style: [
S.height(100.0),
S.width(500.0),
S.minWidth(500.0),
S.align('center'),
S.alignChild('center'),
S.padding(vertical: 20.0, horizontal: 10.0),
S.margin(horizontal: 30.0),
S.backgroundColor(hex: '55ffff'),
S.borderRadius(all: 20.0),
S.boxShadow(
hex: '55ffff', spread: -10.0, blur: 20.0, offset: [0.0, 15.0]),
],
gesture: [
G.onTap(() => print('Division widget pressed!')),
],
child: Text('Centered text inside the division widget'),
),
);
}
}

Hasilnya akan menjadi seperti berikut :



Penjelasan : 

  • Dalam Style kita dapat mengatur desain seperti penggunaan CSS, yaitu height, width, minWidth, align, background, boxShadow dan lain-lain. Bahkan yang semakin bagus di sini kita dapat menggunakan HEX untuk mengatur warna.
  • Gesture berisi action yang dapat diisi dengan onTap, untuk gesture lainnya sepertinya kita masih harus menunggu update selanjutnya.
  • child berisi konten yang dapat kita dengan widget yang diinginkan.


Contoh lainnya kita dapat mengatur susunannya seperti berikut ini.

import 'package:division/division.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  //generic button styling
  final List buttonStyle = [
    S.width(300.0),
    S.padding(horizontal: 15.0, vertical: 20.0),
    S.margin(top: 20.0),
    S.align('center'),
    S.alignChild('center'),
    S.borderRadius(all: 30.0),
    S.backgroundColor(hex: 'eeeeee')
  ];

  //customized generic button styling
  final List button2 = [
    S.backgroundColor(color: Colors.blue[700]),
    S.boxShadow(
        color: Colors.black.withOpacity(0.2),
        blur: 20.0,
        spread: -10.0,
        offset: [0.0, 15.0]),
  ];

  //customized generic button styling
  final List button3 = [
    S.borderRadius(all: 3.0),
    S.backgroundColor(color: Colors.red[300]),
    S.boxShadow(
        color: Colors.black.withOpacity(0.2),
        blur: 20.0,
        spread: -10.0,
        offset: [0.0, 15.0]),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            //plain button
            Division(style: buttonStyle, child: text(title: 'Plain button')),

            //blue button with shadow
            Division(
                style: List.from(buttonStyle)..addAll(button2),
                child: text(title: 'Blue button with shadow', color: Colors.white)),

            //shadow button
            Division(
                style: List.from(buttonStyle)..addAll(button3),
                child: text(title: 'Red button with shadow', color: Colors.white)),
          ],
        ),
      ),
    );
  }

  Widget text({String title, Color color}) {
    return Text(title,
        style: TextStyle(
            fontSize: 18.0,
            fontWeight: FontWeight.bold,
            color: color ?? Colors.black));
  }
}

Seperti yang saya tulis di atas, package ini masih baru jadi mungkin masih perlu waktu sampai developer menambah fitur-fiturnya. 


Selamat mencoba :)