Image Load

Hello world,

Kali ini kita mau mencoba button versi IOS pada flutter yaitu CupertinoButton. Perbedaannya dengan Material desain yaitu ada pada style yang sangat Iphone/IOS sekali. Buat pengguna Iphone pasti sangat mudah membedakannya hehe. Bentuknya mirip dengan RaisedButton pada material desain. Cara penggunaannya sama dengan button versi material yang bisa dicek di sini. Tanpa perlu basa basi mari kita coba saja.

Tahap pertama kita harus buat dulu sebuah halaman dasar Cupertino seperti berikut.

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

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


class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
resizeToAvoidBottomInset: true,
navigationBar: new CupertinoNavigationBar(
middle: Text("IOS Style"),
),
child: new Container(
padding: EdgeInsets.all(20.0),
child: new Center(
child: Text('Hello')
)
)
);
}
}

Selanjutnya kita buat Cupertino button seperti berikut.

CupertinoButton(
onPressed: () {},
child: Text('Hello Button'),
color: Colors.blue,
)

Contoh di atas adalah tombol dengan tema dasarnya yaitu onPressed, child yang berisi text dan color berwarna biru dan border radius defaultnya adalah 8.0. Jika color kita hapus nnti akan terbentuk link tanpa background dimana kalau di material desain itu mirip dengan FlatButton. Sehingga jadinya akan menjadi seperti berikut.

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

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


class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
resizeToAvoidBottomInset: true,
navigationBar: new CupertinoNavigationBar(
middle: Text("IOS Style"),
),
child: new Container(
padding: EdgeInsets.all(20.0),
child: new Center(
child: new CupertinoButton(
onPressed: (){},
child: Text('Hello Button'),
color: Colors.blue,
)
)
)
);
}
}

Selain itu ada attribute tambahan yang bisa dicoba seperti berikut.

const CupertinoButton(
{Key key,
@required Widget child,
EdgeInsetsGeometry padding,
Color color,
Color disabledColor: CupertinoColors.quaternarySystemFill,
double minSize: kMinInteractiveDimensionCupertino,
double pressedOpacity: 0.4,
BorderRadius borderRadius: const BorderRadius.all(Radius.circular(8.0)),
@required VoidCallback onPressed}

)


Selamat mencoba  :)