[go: up one dir, main page]
Scribd
Upload
5 views4 pages

Home Mobile

The document contains a Flutter application that creates a home screen interface with a grid of app icons and a dock at the bottom. It features a list of applications with their respective icons and colors, displayed in a grid layout, along with a header showing the time. The app is designed to have a black background and uses various Material Design components for its UI elements.

Uploaded by

kiruotogawa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views4 pages

Home Mobile

The document contains a Flutter application that creates a home screen interface with a grid of app icons and a dock at the bottom. It features a list of applications with their respective icons and colors, displayed in a grid layout, along with a header showing the time. The app is designed to have a black background and uses various Material Design components for its UI elements.

Uploaded by

kiruotogawa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

import 'package:flutter/material.

dart';

void main() {

runApp(HomePhoneApp());

class HomePhoneApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

home: HomeScreen(),

);

class HomeScreen extends StatelessWidget {

final List<Map<String, dynamic>> apps = [

{"name": "Phone", "icon": Icons.phone, "color": Colors.green},

{"name": "Messages", "icon": Icons.message, "color": Colors.blue},

{"name": "Camera", "icon": Icons.camera_alt, "color": Colors.purple},

{"name": "Gallery", "icon": Icons.photo, "color": Colors.orange},

{"name": "Music", "icon": Icons.music_note, "color": Colors.red},

{"name": "Browser", "icon": Icons.language, "color": Colors.teal},

{"name": "Settings", "icon": Icons.settings, "color": Colors.grey},

{"name": "Calendar", "icon": Icons.calendar_today, "color": Colors.pink},

];

final List<Map<String, dynamic>> dockApps = [


{"name": "Phone", "icon": Icons.phone, "color": Colors.green},

{"name": "Messages", "icon": Icons.message, "color": Colors.blue},

{"name": "Browser", "icon": Icons.language, "color": Colors.teal},

{"name": "Camera", "icon": Icons.camera_alt, "color": Colors.purple},

];

@override

Widget build(BuildContext context) {

return Scaffold(

backgroundColor: Colors.black,

body: SafeArea(

child: Column(

children: [

// Header / jam dan status

Padding(

padding: const EdgeInsets.all(16.0),

child: Align(

alignment: Alignment.topCenter,

child: Text(

"10:45",

style: TextStyle(

fontSize: 48,

fontWeight: FontWeight.bold,

color: Colors.white,

),

),

),

),
// Grid ikon aplikasi

Expanded(

child: GridView.builder(

padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

crossAxisCount: 4,

crossAxisSpacing: 20,

mainAxisSpacing: 20,

),

itemCount: apps.length,

itemBuilder: (context, index) {

return Column(

mainAxisSize: MainAxisSize.min,

children: [

CircleAvatar(

radius: 28,

backgroundColor: apps[index]["color"],

child: Icon(

apps[index]["icon"],

color: Colors.white,

size: 28,

),

),

SizedBox(height: 6),

Text(

apps[index]["name"],

style: TextStyle(color: Colors.white, fontSize: 12),

overflow: TextOverflow.ellipsis,

),
],

);

},

),

),

// Dock bawah

Container(

color: Colors.black.withOpacity(0.5),

padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),

child: Row(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

children: dockApps.map((app) {

return CircleAvatar(

radius: 26,

backgroundColor: app["color"],

child: Icon(app["icon"], color: Colors.white, size: 26),

);

}).toList(),

),

),

],

),

),

);

You might also like