Kali ini saya akan membagikan Tutorial Design UI Modern yang tujuannya digunakan masyarakat berserta info pembayaran iuran warga. langsung saja buat project flutter baru
flutter create -a java designrt
tambahkan plugin clay_containers: ^0.2.2 pada pubspec.yaml sehingga menjadi berikut:
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.3
clay_containers: ^0.2.2
kemudian mulai edit main.dart pada folder libs dan edit:
import 'package:Design2/Screen/Dashboard/Dashboard.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Design2',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
ThemeData appTheme =
ThemeData(primaryColor: Color(0xFFF3791A), fontFamily: 'Oxygen');
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Color(0xFFF47D15),
));
return Scaffold(
body: Container(child: Dashboard()),
);
}
}
buat folder Dashboard di dalam folder lib dan buat file dengan nama Dashboard:
import 'package:Design2/Screen/Dashboard/ArticleWidget.dart';
import 'package:Design2/Screen/Dashboard/BillingWidget.dart';
import 'package:Design2/Screen/Dashboard/DashboardTop.dart';
import 'package:Design2/Screen/Dashboard/GaleriWidget.dart';
import 'package:Design2/components/CustomShapeClipper.dart';
import 'package:flutter/material.dart';
class Dashboard extends StatefulWidget {
Dashboard({Key key}) : super(key: key);
@override
DashboardState createState() => DashboardState();
}
class DashboardState extends State<Dashboard> {
@override
Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
return Scaffold(
body: SafeArea(
child: Stack(
children: [
ClipPath(
clipper: CustomShapeClipper(),
child: Container(
height: height * .3,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [firstColors, secondColors],
),
),
),
),
Container(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.location_on,
color: Colors.white,
),
SizedBox(
width: 8,
),
Text(
"Cluster River Side Krian",
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
],
),
Spacer(),
Icon(
Icons.notifications,
color: Colors.white,
)
],
),
],
),
),
Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
DashboardTop(
height: height * 0.3,
),
SizedBox(
height: 8,
),
BillingWidget(),
SizedBox(
height: 8,
),
GaleriKegiatanWidget(),
SizedBox(
height: 8,
),
ArticleWidget(),
SizedBox(
height: 8,
),
],
),
),
),
],
),
),
],
)),
);
}
}
tetap pada folder Dashboard buat file dengan nama DashboardTop.dart:Â
import 'package:Design2/components/CustomShapeClipper.dart';
import 'package:flutter/material.dart';
Color firstColors = Color(0xFFF47D15);
Color secondColors = Color(0xFFF47D15);
class DashboardTop extends StatelessWidget {
final height;
const DashboardTop({
Key key,
@required this.height,
}) : super(key: key);
@override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
return Stack(
children: [
Center(
child: Column(
children: [
CircleAvatar(
radius: height * .07,
backgroundColor: Colors.transparent,
backgroundImage: AssetImage('assets/images/Chris-Pratt.jpg'),
),
SizedBox(
height: 8,
),
Text(
"Crist Pratt",
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
SizedBox(
height: 2,
),
Text(
"Blok XII-24",
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
SizedBox(
height: 16,
),
],
),
)
],
);
}
}
tetap pada folder Dashboard buat file dengan nama BillingWidget.dart: Â
import 'package:flutter/material.dart';
class BillingWidget extends StatefulWidget {
BillingWidget({Key key}) : super(key: key);
@override
_BillingWidgetState createState() => _BillingWidgetState();
}
class _BillingWidgetState extends State<BillingWidget> {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.only(left: 10, right: 10),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Card(
elevation: 8,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tagihan Anda Bulan September",
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.black38,
fontSize: 12,
fontWeight: FontWeight.w400,
),
),
SizedBox(
height: 8,
),
Text(
"Rp. 40.000",
textAlign: TextAlign.start,
style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.black,
fontSize: 20,
),
)
],
),
),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Column(
children: [
SizedBox(
height: 8,
),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.green)),
color: Colors.white,
textColor: Colors.green,
padding: EdgeInsets.symmetric(
vertical: 8,
horizontal: 20,
),
onPressed: () {},
child: Text(
"Sudah Di Bayar".toUpperCase(),
style: TextStyle(
fontSize: 14.0,
),
),
),
],
),
),
)
],
),
SizedBox(
height: 16,
),
Text(
"Tagihan Bulan Oktober Akan Muncul pada 5 Oktober 2020",
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 12,
color: Colors.black38,
),
)
],
),
),
)
],
),
);
}
}
 Buat file ArticleWidget.dart tetap pada folder Dashboard dan tambahkan koding:Â
import 'package:flutter/material.dart';
class ArticleWidget extends StatefulWidget {
ArticleWidget({Key key}) : super(key: key);
@override
_ArticleWidgetState createState() => _ArticleWidgetState();
}
class _ArticleWidgetState extends State<ArticleWidget> {
@override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.symmetric(horizontal: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Artikel Terbaru",
style: TextStyle(
color: Colors.black45,
fontSize: 20,
fontWeight: FontWeight.w400,
),
),
Text(
"Lihat Lainnya",
style: TextStyle(
color: Colors.amberAccent,
),
),
],
),
),
SizedBox(
height: 4,
),
Card(
margin: EdgeInsets.symmetric(horizontal: 16),
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Column(
children: [
SizedBox(
height: 8,
),
Column(
children: List.generate(3, (index) {
return Container(
margin: EdgeInsets.symmetric(vertical: 2),
width: double.infinity,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.asset(
"assets/images/lasvegas.jpg",
height: height * .09,
width: width * .25,
fit: BoxFit.fill,
),
),
SizedBox(
width: 8,
),
Flexible(
child: Text(
"Aliqua ea labore nisi dolor labore pariatur esse .Aliqua ea labore nisi dolor labore pariatur esse .Aliqua ea labore nisi dolor labore pariatur esse .Aliqua ea labore nisi dolor labore pariatur esse .Aliqua ea labore nisi dolor labore pariatur esse .Aliqua ea labore nisi dolor labore pariatur esse .Aliqua ea labore nisi dolor labore pariatur esse ."
.substring(0, 90),
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w300,
),
),
)
],
),
),
);
}),
),
SizedBox(
height: 8,
),
],
),
),
],
),
);
}
}
 buat file GaleriWidget.dart pada folder Dashboard:Â
import 'package:flutter/material.dart';
class GaleriKegiatanWidget extends StatelessWidget {
const GaleriKegiatanWidget({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 12, right: 12),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Card(
child: Container(
height: MediaQuery.of(context).size.height / 5,
width: MediaQuery.of(context).size.width / 1.4,
child: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(
5.0) // <--- border radius here
),
image: DecorationImage(
image: AssetImage(
"assets/images/sydney.jpeg",
),
fit: BoxFit.cover,
),
),
child: Text(""),
),
Positioned(
child: Text(
"Adipisicing cupidatat adipisicing sunt est ipsum excepteur aliqua laboris cupidatat mollit consequat. Veniam non voluptate magna dolor dolor incididunt. Laboris excepteur id commodo consequat nostrud in dolor. Tempor irure qui aliqua eu cupidatat."
.substring(0, 60),
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w400,
color: Colors.white),
),
bottom: 12,
left: 16,
right: 16,
)
],
),
),
),
Card(
child: Container(
height: MediaQuery.of(context).size.height / 5,
width: MediaQuery.of(context).size.width / 1.4,
child: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(
5.0) // <--- border radius here
),
image: DecorationImage(
image: AssetImage(
"assets/images/sydney.jpeg",
),
fit: BoxFit.cover,
),
),
child: Text(""),
),
Positioned(
child: Text(
"Adipisicing cupidatat adipisicing sunt est ipsum excepteur aliqua laboris cupidatat mollit consequat. Veniam non voluptate magna dolor dolor incididunt. Laboris excepteur id commodo consequat nostrud in dolor. Tempor irure qui aliqua eu cupidatat."
.substring(0, 60),
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w400,
color: Colors.white),
),
bottom: 12,
left: 16,
right: 16,
)
],
),
),
),
],
),
),
);
}
}
dan buat file lagi dengan nama CustomShapeClipper.dart:Â
import 'package:flutter/material.dart';
class CustomShapeClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final Path path = Path();
path.lineTo(0.0, size.height);
var firstEndPoint = Offset(size.width * .5, size.height - 30.0);
var firstControlpoint = Offset(size.width * 0.25, size.height - 70.0);
path.quadraticBezierTo(firstControlpoint.dx, firstControlpoint.dy,
firstEndPoint.dx, firstEndPoint.dy);
var secondEndPoint = Offset(size.width, size.height - 85.0);
var secondControlPoint = Offset(size.width * .80, size.height - 10);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondEndPoint.dx, secondEndPoint.dy);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper oldClipper) => true;
}
Â
