Widget Flutter

Mobile Developer - This article is part of a series.

Part 5: This Article

Part 6: Widget Flutter Lanjutan

Part 7: Widget Flutter Lanjutan 2

Widget Flutter

Text Widget
Column & Row Widget
Container Widget
Stateless & Statefull Widget

Method

Anonymous Method

Text Widget #

Parameter #

Parameter pada text widget :

maxLines
overflow
softWrap
textAlign

body: Center(
   child: Container(
     color: Colors.amber,
     width: 150,
     height: 150,
     child: const Text(
       'hai kami sedang belajar dasar widget flutter menggunakan visual studio code dan virtual device',
       maxLines: 2,
       overflow: TextOverflow.e ellipsis,
       softWrap: false,
       textAlign: TextAlign. justify,
        ), // Text
    ), // Container
), // Center

Text Style #

Text Style parameter :

color
fontSize
fontWeight
backgroundColor
fontStyle

body: Center(
    child: Container(
        color: Colors.amber,
        width: 150,
        height: 150,
        child: const Text(
            'hai kami sedang belajar dasar widget flutter menggunakan visual studio code dan virtual device',
            style: TextStyle(
            color: Colors.white,
            fontSize: 15,
            fontWeight: FontWeight.w700,
            backgroundColor: Colors.black,
            fontStyle: FontStyle. italic,
            ), // TextStyle
        ), // Text
    ), // Container
), //Center

Column & Row #

Column : Vertical
Row : Horizontal

body: const Column(
  mainAxisAlignment: MainAxisAlignment. center,
  crossAxisAlignment: CrossAxisAlignment. start,
   children: [
    Text ("Data 1"),
    Text ("Data 2"),
    Text ("Data 3"),
    Text ("Data 4"),
     Row(
       children: [
         Text ("Data 1"),
         Text ("Data 2"),
         Text ("Data 3"),
         Text ("Data 4"),
         Text ("Data 5")
       ],
        ), // Row
    ],
), //Column

Container Widget #

Padding & Margin #

Padding : Mengatur jarak dalam.

Margin : Mengatur jarak luar.

Properti Edge.Insets :

all()
fromLTRB()
only()
symmetric().

body: Container(
  margin: const EdgeInsets.all(10),
  padding: const EdgeInsets.all(60),
  color: Colors.amber,
  child: Container(
    color: Colors.black,
  ),// Container
),// Container

BoxDecoration #

Untuk styling container

body: Center(
    child: Container(
        decoration: BoxDecoration(
            color: Colors.black,
            borderRadius: BorderRadius.circular(10),
            border: Border.all(color: Colors.white, width: 10),
            gradient: const LinearGradient(
            colors: [Colors.pink, Colors.black],
            begin: Alignment.bottomCenter,
            end: Alignment.topCenter,
            ), // LinearGradient
        ), // BoxDecoration
    ), // Container
),

Stateless & Stateful #

StatelessWidget #

Stateles tidak memiliki perubahan pada tampilan atau tampilannya fixed. Tidak ada perubahan lagi dari user.

StatelessWidget contohnya seperti dibawah ini :

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text("Berkah IT"), // Container
        ),
      ),
    );
  }
}

StatefulWidget #

StatefulWidget biasa kita gunakan jika ada data yang dinamis (dapat berubah ketika user melakukan sebuah aksi). Seperti perhitungan angka atau animasi dalam aplikasi.

StatefulWidget memiliki tanda State. Seperti dibawah ini :

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {

}

Contoh aplikasi sederhana penggunaan StatefulWidget :

class _MainAppState extends State<MainApp> {
  int angka = 0;

  void tambahBilangan() {
    setState(() {
      angka++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Berkah IT"),
        ),
        body: Center(
          child: Column(
            children: [
              Text("Angka ke $angka"),
              ElevatedButton(
                onPressed: () {
                  tambahBilangan();
                },
                child: const Text("Tambah"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Anonymous Method #

Anonymous Method merupakan method yang tidak memiliki nama. Penempatannya langsung di dalam fungsi. Seperti contoh di bawah ini :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  int angka = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
         appBar: AppBar(
          title: const Text("Berkah IT"),
        ),
        body: Center(
          child: Column(
            children: [
              Text("Angka ke $angka"),
              ElevatedButton(
                onPressed: () {
                  setState(
                    () {
                      angka++;
                    }, // Anonymous Method
                  );
                },
                child: const Text("Tambah"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Mobile Developer - This article is part of a series.

Part 1: Mobile Developer with Flutter

Part 2: Dasar Dart

Part 3: Dasar Dart Lanjutan

Part 4: Dasar Flutter

Part 5: This Article

Part 6: Widget Flutter Lanjutan

Part 7: Widget Flutter Lanjutan 2