Memberi style pada widget container di flutter

Widget container merupakan salah satu widget pada flutter yang paling mendasar dan sangat penting dalam membangun UI untuk applikasi yang kita buat, Pada dasarnya widget container mempunyai beberapa properti yaitu : alignment, child, clipBehavior, color, constraints, decoration, foregroundDecoration, hashCode, key, margin, padding.

Pada tutorial kali kita kita akan mencoba memberi style atau menata suatu container dengan properties nya sehingga container tersebut menjadi suatu UI yang kita harapkan.

Tabel isi:

1. Membuat project baru
2. Membuat container
3. Memberi ukuran width, height
4. Menambah text dalam container
5. Membuat BoxDecoration dan menambah properti border, borderRadius, gradient dan boxShadow
6. Menambah properti transform

1. Membuat Project baru di flutter
   

Langkah pertama kita adalah membuat project baru, Buka VScode lalu pilih menu Terminal-> New terminal lalu ketikan dengan perintah “flutter create appcontainer” untuk membuat project baru dengan nama appcontainer (https://www.geeksforgeeks.org/flutter-container-styling/)

Kemudian masuk ke project dengan perintah “cd appcontainer“, run aplikasi kita dengan cara memilih menu Run->start_debugging jika tidak ada error akan muncul seperti gambar ini

2. Membuat container

buka file main.dart yang ada di folder lib lalu hapus semua kodenya dan isi dengan kode dibawah ini

import 'package:flutter/material.dart';

void main() {
  runApp(const FirstApp());
}

class FirstApp extends StatelessWidget {
  const FirstApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Container"),
        ),
        body: Center(
            child: Container(
          
        )));
  }
}

Jika kode diatas dijalankan, akan tampil halaman kosong karena body di bagian container masih kosong 

3. Memberi ukuran width, height

sekarang mari kita akan memberi style kepada container yang masih kosong tersebut, tambahkan kode dibawah ini dalam container :

margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
                child: Center(
                    child: const Text(
                  'THIS IS CONTAINER',
                  style: TextStyle(color: Colors.black),
                )),

5. Membuat BoxDecoration dan menambah properti border, borderRadius, gradient dan boxShadow

decoration: BoxDecoration(
                    color: Color.fromARGB(255, 9, 248, 1),
                    border: Border.all(
                      color: Color.fromARGB(255, 233, 1, 183),
                      width: 2.0,
                    ),
                    borderRadius: BorderRadius.circular(10.0),
                    gradient: LinearGradient(colors: [
                      Color.fromARGB(255, 42, 238, 117),
                      Color.fromARGB(255, 0, 156, 13)
                    ]),
                    boxShadow: [
                      BoxShadow(
                          color: Colors.grey,
                          blurRadius: 2.0,
                          offset: Offset(6.0, 6.0)),
                    ])

import 'package:flutter/material.dart';

void main() {
  runApp(const FirstApp());
}

class FirstApp extends StatelessWidget {
  const FirstApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Container"),
        ),
        body: Center(
            child: Container(
                //kita memberi width sebesar 200
                width: 200,
                //kita memberi height sebesar 200
                height: 200,
                margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
                child: Center(
                    child: const Text(
                  'THIS IS CONTAINER',
                  style: TextStyle(color: Colors.black),
                )),
                decoration: BoxDecoration(
                    color: Color.fromARGB(255, 9, 248, 1),
                    border: Border.all(
                      color: Color.fromARGB(255, 233, 1, 183),
                      width: 2.0,
                    ),
                    borderRadius: BorderRadius.circular(10.0),
                    gradient: LinearGradient(colors: [
                      Color.fromARGB(255, 42, 238, 117),
                      Color.fromARGB(255, 0, 156, 13)
                    ]),
                    boxShadow: [
                      BoxShadow(
                          color: Colors.grey,
                          blurRadius: 2.0,
                          offset: Offset(2.0, 2.0)),
                    ]))));
  }
}

NOTE : Dapat kita lihat pada kode di atas property decoration membungkus properti border, borderRadius, gradient dan boxShadow, jika tidak di bungkus dengan decoration dipastikan akan error, jadi harus dibungkus dengan properti decoration ya…

Jika kode diatas di run dengan cara memilih menu Run->start_debugging maka akan tampil seperti gambar dibawah ini

6. Menambah properti transform

Properti Transform berfungsi untuk memutar container ke koordinat yang kita inginkan.

Penggunaannya seperti ini : transform: Matrix4.rotationZ(0.1), 

jadi code lengkapnya seperti ini

import 'package:flutter/material.dart';

void main() {
  runApp(const FirstApp());
}

class FirstApp extends StatelessWidget {
  const FirstApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Container"),
        ),
        body: Center(
            child: Container(
                //kita memberi width sebesar 200
                width: 200,
                //kita memberi height sebesar 200
                height: 200,
                margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
                transform: Matrix4.rotationZ(0.1),
                child: Center(
                    child: const Text(
                  'THIS IS CONTAINER',
                  style: TextStyle(color: Colors.black),
                )),
                decoration: BoxDecoration(
                    color: Color.fromARGB(255, 9, 248, 1),
                    border: Border.all(
                      color: Color.fromARGB(255, 233, 1, 183),
                      width: 2.0,
                    ),
                    borderRadius: BorderRadius.circular(10.0),
                    gradient: LinearGradient(colors: [
                      Color.fromARGB(255, 42, 238, 117),
                      Color.fromARGB(255, 0, 156, 13)
                    ]),
                    boxShadow: [
                      BoxShadow(
                          color: Colors.grey,
                          blurRadius: 2.0,
                          offset: Offset(6.0, 6.0)),
                    ]))));
  }
}

Jika dijalankan kode diatas akan seperti gambar dibawah ini

Demikian tutorial kali ini semoga dapat memberikan manfaat.