Flutter : Menggunakan Column

Di bawah ini layout aplikasi Flutter dengan 1 Text pada posisi Center (di tengah-tengah layar)


Selanjutnya akan diubah menjadi seperti gambar kedua di bawah ini dengan 2 buah Text, posisi masih sama Center (di tengah-tengah layar)


Berikut ini code awal

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Agar dapat memasukkan 2 buah Text, gunakan Column, kemudian masukkan 2 buah Text sebagai children

Column(
  children: const <Widget>[
    Text('Deliver features faster'),
    Text('Craft beautiful UIs'),
  ],
),

Tambahkan mainAxisAlignment agar posisi widget center horizontal

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: const <Widget>[
    Text('Deliver features faster'),
    Text('Craft beautiful UIs'),
  ],
),

Selanjutnya masukkan Column sebagai child dari Center, agar posisi widget center vertikal

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: const <Widget>[
      Text('Deliver features faster'),
      Text('Craft beautiful UIs'),
    ],
  ),
),
Source code lengkap
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const <Widget>[
              Text('Deliver features faster'),
              Text('Craft beautiful UIs'),
            ],
          ),
        ),
      ),
    );
  }
}

Comments

  1. Ini skrg lagi pengen bangun applikasi android..sangat membantu

    Numpang tanya lagi hu,kalau untuk tampilan macUs gimana ?

    ReplyDelete
    Replies
    1. Pakai Cupertino widget gan https://codelabs.developers.google.com/codelabs/flutter-cupertino?hl=id#0

      Delete

Post a Comment

Popular posts from this blog

Contoh Inheritance (Pewarisan) di Java

Contoh Penerapan Interface di Pemrograman Java

Review Singkat Pilihan Transportasi Umum Rute Solo - Wonosobo