Image Load

Hello world,

Cupertino adalah style widget pada flutter yang dikhususkan untuk membuat style IOS. Desain yang ada pada Cupertino sangat IOS sekali dengan bentuk appbar, button, warna yang sangat IOS. Apakah setiap kali membuat aplikasi dengan flutter untuk IOS harus menggunakan Cupertino? sebenarnya tidak diharuskan akan tetapi dengan widget Material Desain pada widget default flutter sangat berbeda dari desain aplikasi IOS pada umumnya.

Penggunaanya cukup berbeda dari widget flutter Material jadi saat kita ingin menggunakan Cupertino akan terasa seperti merombak desain yang sebelumnya menggunakan style material. Mari ikuti tahap berikut. pada contoh pertama ini saya coba menuliskan contoh untuk Appbar yang pada cupertino disebut CupertinoNavigationBar.

1. Import pada halaman yang diinginkan.

import 'package:flutter/cupertino.dart';

2. Mengganti MaterialApp menjadi CupertinoApp.

runApp(
new CupertinoApp(
title: "My Apps",
home: new Myapp(),
)
);

3. Mengganti Scaffold dengan CupertinoPageScaffold

4. Menganti appbar dengan navigationBar.

5. Mengganti body menjadi child.


Sehingga hasil akhirnya 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 Text("Hello World", style: TextStyle(color:Colors.white)),
)
)
);
}
}


Berikut attribute pada CupertinoNavigationBar yang dapat dicoba:

const CupertinoNavigationBar(
{
    Key key,
    Widget leading,
    bool automaticallyImplyLeading: true,
    bool automaticallyImplyMiddle: true,
    String previousPageTitle,
    Widget middle,
    Widget trailing,
    Border border: _kDefaultNavBarBorder,
    Color backgroundColor,
    Brightness brightness,
    EdgeInsetsDirectional padding,
    Color actionsForegroundColor,
    bool transitionBetweenRoutes: true,
    Object heroTag: _defaultHeroTag}
)


Selamat mencoba :)