Basic Layout
Terdapat beberapa layout yang dapat digunakan, yaitu:
Basic Layout
Paling dasar dari layouting adalah kita dapat menggunakan row dan column.
Row
lib/main.dart
import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); Widget build(BuildContext context) { return MaterialApp( title: 'Belajar Layout', theme: ThemeData( primarySwatch: Colors.blue ), home: Scaffold( appBar: AppBar( title: const Text("Belajar Layout"), ), body: Row( children: [ Container( color: Colors.redAccent, child: const FlutterLogo( size: 50.0, ), ), Container( color: Colors.greenAccent, child: const FlutterLogo( size: 50.0, ), ), Container( color: Colors.brown, child: const FlutterLogo( size: 50.0, ), ), Container( color: Colors.pinkAccent, child: const FlutterLogo( size: 50.0, ), ) ], ), ), ); }}
Column
lib/main.dart
import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); Widget build(BuildContext context) { return MaterialApp( title: 'Belajar Layout', theme: ThemeData( primarySwatch: Colors.blue ), home: Scaffold( appBar: AppBar( title: const Text("Belajar Layout"), ), body: Column( children: [ Container( color: Colors.redAccent, child: const FlutterLogo( size: 50.0, ), ), Container( color: Colors.greenAccent, child: const FlutterLogo( size: 50.0, ), ), Container( color: Colors.brown, child: const FlutterLogo( size: 50.0, ), ), Container( color: Colors.pinkAccent, child: const FlutterLogo( size: 50.0, ), ) ], ), ), ); }}
mainAxisAlignment
Terdapat beberapa rerata yang dapat digunakan, yaitu:
lib/main.dart
import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); Widget build(BuildContext context) { return MaterialApp( title: 'Belajar Layout', theme: ThemeData( primarySwatch: Colors.blue ), home: Scaffold( appBar: AppBar( title: const Text("Belajar Layout"), ), body: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( color: Colors.redAccent, child: const FlutterLogo( size: 50.0, ), ), Container( color: Colors.greenAccent, child: const FlutterLogo( size: 50.0, ), ), Container( color: Colors.brown, child: const FlutterLogo( size: 50.0, ), ), Container( color: Colors.pinkAccent, child: const FlutterLogo( size: 50.0, ), ) ], ), ), ); }}
Berikut adalah property lainnya:
List View
Untuk menampilkan List yang dapat di scroll
ListView
Bagian default dari listview
lib/main.dart
import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); Widget build(BuildContext context) { return MaterialApp( title: 'Belajar Layout', theme: ThemeData( primarySwatch: Colors.blue ), home: Scaffold( appBar: AppBar( title: const Text("Belajar Layout"), ), body: ListView( children: <Widget>[ Container( padding: const EdgeInsets.all(15), child: const Text('Flutter Widget: Penggunaan ListView Class', style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold) ), ), Container( padding: const EdgeInsets.all(15), child: const Text( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies accumsan auctor. Vestibulum sed enim ultrices, posuere ligula nec, sollicitudin magna. Nulla facilisi. Praesent finibus leo quam, nec fringilla velit sollicitudin sed. Praesent quis dui a ex ornare pellentesque. Sed gravida elit at velit molestie, interdum feugiat odio egestas. Mauris justo mi, lacinia quis sollicitudin vitae, commodo vitae eros. Proin luctus tempor dui, sed blandit lectus mollis rutrum. Integer dolor felis, tempus et metus eu, faucibus laoreet ipsum. In lobortis ligula sed dignissim ullamcorper. Morbi sed cursus arcu. In tellus velit, consequat ut sem vel, lobortis dignissim arcu. Maecenas aliquam eu lectus a dignissim. Proin suscipit metus velit, non tincidunt metus fermentum at. Donec mattis placerat varius. Vestibulum sodales feugiat aliquam. Donec venenatis faucibus orci nec faucibus. Nam euismod magna id semper sollicitudin. Sed dignissim nulla sed varius elementum. Aenean et felis enim. Nulla consectetur ex quis lacinia sodales. Morbi sed egestas eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Vivamus pulvinar, ligula id sodales ullamcorper, augue est sollicitudin ligula, a luctus tortor metus volutpat massa. Aliquam erat volutpat. Nam urna ex, lobortis a ligula ut, suscipit maximus lorem. Fusce non nisl eget nibh mollis consequat. Proin at sodales risus. Vivamus hendrerit velit ut est semper vestibulum. Nullam eu augue congue, ullamcorper purus vitae, suscipit purus. Aliquam at tristique diam, vitae scelerisque purus. Sed mattis aliquam quam, in interdum metus hendrerit et. Nullam ut diam non nibh aliquam porta quis mollis metus. Sed venenatis lacus ac enim suscipit, auctor condimentum ligula lacinia. Etiam auctor, odio et maximus sagittis, nisl leo varius purus, vel tristique tortor sem sit amet augue. Nam a pellentesque dui. Nam ornare diam eget libero lacinia, vitae interdum eros pharetra. Nam ornare fringilla dolor, a tristique eros. Praesent venenatis nisi eget mi cursus porttitor. In vehicula tortor id bibendum condimentum. Aenean sed sem dolor. Sed condimentum mi commodo ante venenatis condimentum. Praesent ultricies quis ligula nec consequat. Suspendisse potenti. Ut vitae sem sed est laoreet facilisis. Curabitur sit amet bibendum magna, in porttitor metus. Nulla rhoncus leo vitae felis fermentum auctor. Praesent nulla massa, mattis non placerat quis, ullamcorper eu ex. Sed non egestas quam. Mauris ac turpis lacinia leo auctor iaculis id et libero. Vivamus porttitor tincidunt ultrices. Morbi aliquet turpis vitae est auctor facilisis", style: TextStyle(fontSize: 16) ), ), ] ) ), ); }}
ListView.builder
Untuk menampilkan list sesuai jumlah data yang ada
lib/main.dart
import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static List namaBulan = [ "Januari", "Fabruari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ]; Widget build(BuildContext context) { return MaterialApp( title: 'Belajar Layout', theme: ThemeData( primarySwatch: Colors.blue ), home: Scaffold( appBar: AppBar( title: const Text("Belajar Layout"), ), body: ListView.builder( itemBuilder: (context, index) { return Card( child: Padding( padding: const EdgeInsets.all(15.0), child: Text(namaBulan[index], style: const TextStyle(fontSize: 30)), ), ); }, itemCount: namaBulan.length, ), ), ); }}
ListView.separator
Widget yang berada di antara list item.
lib/main.dart
import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static List namaBulan = [ "Januari", "Fabruari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ]; Widget build(BuildContext context) { return MaterialApp( title: 'Belajar Layout', theme: ThemeData( primarySwatch: Colors.blue ), home: Scaffold( appBar: AppBar( title: const Text("Belajar Layout"), ), body: ListView.separated( itemBuilder: (context, index) { return Card( child: Padding( padding: const EdgeInsets.all(15.0), child: Text(namaBulan[index], style: const TextStyle(fontSize: 30)), ), ); }, separatorBuilder: (context, position) { return Container( color: Colors.blueAccent, child: const Text('contoh untuk separator Builder', style: TextStyle(fontSize: 20)), ); }, itemCount: namaBulan.length, ), ), ); }}
Stack View
Menumpuk beberapa widget
lib/main.dart
import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static final date = DateTime.now(); Widget build(BuildContext context) { return MaterialApp( title: 'Belajar Layout', theme: ThemeData( primarySwatch: Colors.blue ), home: Scaffold( appBar: AppBar( title: const Text("Belajar Layout"), ), body: Stack( children: <Widget>[ Container( decoration: const BoxDecoration( image: DecorationImage( image: NetworkImage( 'https://cdn.pixabay.com/photo/2022/09/16/17/07/city-7459162_960_720.jpg'), fit: BoxFit.fitHeight, ), ), ), const Positioned( right: 40.0, top: 100.0, child: Text("RY", style: const TextStyle(color: Colors.white, fontSize: 45.0)), ), const Positioned( right: 40.0, top: 150.0, child: Text("Belajar Flutter", style: TextStyle(color: Colors.white, fontSize: 16.0)), ), Positioned( bottom: 48.0, left: 10.0, right: 10.0, child: Card( elevation: 8.0, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0), ), child: Column( children: const<Widget> [ Padding( padding: EdgeInsets.all(16.0), child: Text( "Quotes", style: TextStyle( fontSize: 20.0, fontWeight: FontWeight.bold, ), ), ), Padding( padding: EdgeInsets.only( top: 0, left: 16.0, right: 16.0, bottom: 8.0 ), child: Text( "Isi Teks....."), ), Padding( padding: EdgeInsets.only( top: 8.0, left: 16.0, right: 16.0, bottom: 32.0), child: Text("Sub Title"), ), ], ), ), ), ], ), ), ); }}
Grid View
Kombinasi antara List View dan Row Colum
lib/main.dart
import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static final date = DateTime.now(); Widget build(BuildContext context) { return MaterialApp( title: 'Belajar Layout', theme: ThemeData( primarySwatch: Colors.blue ), home: Scaffold( appBar: AppBar( title: const Text("Belajar Layout"), ), body: GridView.count( crossAxisCount: 3, children: List.generate(9, (index) { return Container( child: const Card( color: Colors.redAccent, ), ); }), ) ), ); }}