Gunakan tanda [] untuk mencari tag gan! contoh [flutter, javascript]

Flutter is Amazing
Flutter is Amazing

Bab 5

Container

remove_red_eye 1687 Kali
spellcheck 1085 Kata, 4889 Karakter
*Catatan: buku ini masih berlangsung hingga memiliki label selesai.

Perkenalan

Container pada flutter merupakan sebuah widget yang paling sering digunakan oleh pengguna flutter. Widget ini dapat menggambarkan sebuah kotak yang dapat diatur tinggi, lebar, padding, margin, dan lain sebagainya. Mari kita lihat cheat sheet di bawah ini.


Cheat Sheet Attribute Container

Cheat sheet di bawah hanyalah beberapa attribute yang sering digunakan pada Container.

marginDigunakan untuk membuat jarak dari container ke widget lain.
Tipe data: EdgeInsetsGeometry? (nullable)
paddingDigunakan untuk membuat jarak dari container ke child widget.
Tipe data: EdgeInsetsGeometry? (nullable)
height

Tinggi container

Tipe data: double? (nullable)

width

Lebar container

Tipe data: double? (nullable)

color

Warna container, attribute ini bisa mengakibatkan error jika pada BoxDecoration ada  attribute color juga

Tipe data: Color? (nullable)

decoration

Digunakan untuk membuat dekorasi Container

Tipe data: Decoration? (nullable)

align

Menyejajarkan child ke Container. Jika bukan null, Container akan mengembang untuk mengisi induknya dan memposisikan child-nya di dalam dirinya sendiri sesuai dengan nilai yang diberikan. Jika kendala yang masuk tidak dibatasi, maka child akan dibungkus dengan susut sebagai gantinya.

Tipe data: AlignmentGeometry?  (nullable)

child

Anak yang dimiliki container

Tipe data: Widget? (nullable)

Bermain Dengan Container

1. width, height, color (kotak warna merah)

contoh penggunaan:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          //contoh kode container
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red
          ),
        ),
      ),
    );
  }
}

Output:

2. decoration, border radius (kotak tidak lancip)

contoh penggunaan:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          //contoh kode container
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(20)
            )
          ),
        ),
      ),
    );
  }
}

Output:

3. Transform (transform matrix)

contoh penggunaan:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          //contoh kode container
          child: Container(
            width: 100,
            height: 100,
            transform: Matrix4.rotationZ(0.5),
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(20)
            )
          ),
        ),
      ),
    );
  }
}

Output:

4. Child (anak)


import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          //contoh kode container
          child: Container(
            width: 100,
            height: 100,
            transform: Matrix4.rotationZ(0.5),
            //contoh alignment
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(20)
            ),
            //contoh child
            child: Container(
              width: 50,
              height: 50,
              decoration: const BoxDecoration(color: Colors.blue)
            )
          ),
        ),
      ),
    );
  }
}

output:

Artikel Selanjutnya (Text Widget)
Navigasi Konten