[Flutter][46] Membuat Border dan Border Radius



Card image cap

[Flutter][46] Membuat Border dan Border Radius

Hello world,

Masih berkaitan dengan widget Container, seperti yang saya bahas sebelumnya yaitu mengenai BoxDecoration, kali ini ada salah satu atau salah dua attribute dari BoxDecoration yang akan saya bahas yaitu Border dan Border Radius pada flutter. Seperti halnya border pada Html/Css, di flutter kita juga dapat mengatur ketebalan border dan juga warna border. Strukturnya seperti contoh di bawah ini.

Border All (Border di seluruh sisi)

Border.all(width: 2.0, color: Colors.white))

Sedangkan penggunaannya adalah seperti berikut.

Container(
  decoration: const BoxDecoration(
    border: Border.all(width: 2.0, color: Colors.white),
  ),),

BorderSide (Border pada sisi tertentu)

Border(bottom: BorderSide(color: Theme.of(context).dividerColor))

Pada penggunaan BorderSide kita harus menyebutkan sisi mana yang ingin diberi border. Contoh:

Container(
  decoration: const BoxDecoration(
    border: Border(
      top: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),
      left: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),
      right: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
      bottom: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
    ),
  ), ),


Border Radius

Untuk menunjukkan bentuk border radius yang bisa digunakan langsung saja saya beri contoh gambar dan code seperti berikut.


import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('Border example app'),
),
body: Center(
child: new GridView.count(
crossAxisCount: 3,
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.red,
border: Border.all(color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.circular(20.0),
),
),
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
),
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.all(Radius.elliptical(10.0, 20.0)),
),
),
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20.0)),
),
),
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.teal,
border: Border.all(color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.only(bottomRight: Radius.circular(20.0)),
),
),
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.amber,
border: Border.all(color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.only(topLeft: Radius.circular(20.0)),
),
),
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.brown,
border: Border.all(color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.only(topRight: Radius.circular(20.0)),
),
),
],
),
),
),
);
}
}


Selamat mencoba :)

Share :