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

Flutter Dasar Widget Container

Flutter Dasar Widget Container

Artikel ini dibukukan pada buku Flutter is Amazing
access_time 29 Jul 2022 remove_red_eye 237 Kali spellcheck 1085 Kata, 4888 Karakter
#flutter #dart #container

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 ini dibukukan pada buku Flutter is Amazing
Navigasi Konten