Dribbble Design
このデザインをFlutterで真似してみた。
今回の目標。
今回はここまで作ってみたいと思います。
基本説明
Tableについて、
デザインについて
01
02
03
Code
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_flight/CustomShapeClipper.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 Demo',
theme: appTheme,
home: HomeScreen(),
);
}
}
Color firstColor = Color(0xfff47d15);
Color secondColor = Color(0xffef772c);
ThemeData appTheme =
ThemeData(primaryColor: Color(0xfff3791a), fontFamily: 'Oxygen');
List<String> locations = ['Boston (BOS)', 'New York City (JFK)'];
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
HomeScreenTopPart(),
],
),
);
}
}
const TextStyle dropDownLabelStyle =
TextStyle(color: Colors.white, fontSize: 16.0);
const TextStyle dropDownMenuItemsStyle =
TextStyle(color: Colors.black, fontSize: 16.0);
class HomeScreenTopPart extends StatefulWidget {
@override
_HomeScreenTopPartState createState() => _HomeScreenTopPartState();
}
class _HomeScreenTopPartState extends State<HomeScreenTopPart> {
var selectedLocationIndex = 0;
var isFlightSelected = true;
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
ClipPath(
clipper: CustomShapeClipper(),
child: Container(
height: 450.0,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [firstColor, secondColor])),
child: Column(
children: <Widget>[
SizedBox(
height: 50.0,
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: <Widget>[
Icon(
Icons.location_on,
color: Colors.white,
),
SizedBox(
width: 16.0,
),
PopupMenuButton(
onSelected: (index) {
setState(() {
selectedLocationIndex = index;
});
},
child: Row(
children: <Widget>[
Text(
locations[selectedLocationIndex],
style: dropDownLabelStyle,
),
Icon(
Icons.keyboard_arrow_down,
color: Colors.white,
)
],
),
itemBuilder: (BuildContext context) =>
<PopupMenuItem<int>>[
PopupMenuItem(
child: Text(
locations[0],
style: dropDownMenuItemsStyle,
),
value: 0,
),
PopupMenuItem(
child: Text(
locations[1],
style: dropDownMenuItemsStyle,
),
value: 1,
)
],
),
Spacer(),
Icon(
Icons.settings,
color: Colors.white,
)
],
),
),
SizedBox(
height: 50.0,
),
Text(
"Where would \n you want to go?",
style: TextStyle(fontSize: 24.0, color: Colors.white),
textAlign: TextAlign.center,
),
SizedBox(
height: 30.0,
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 32.0),
child: Material(
elevation: 5.0,
borderRadius: BorderRadius.all(Radius.circular(30.0)),
child: TextField(
controller: TextEditingController(
text: locations[0],
),
style: dropDownMenuItemsStyle,
cursorColor: appTheme.primaryColor,
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(
horizontal: 32.0, vertical: 14.0),
suffixIcon: Material(
elevation: 2.0,
borderRadius: BorderRadius.all(Radius.circular(30.0)),
child: Icon(
Icons.search,
),
),
border: InputBorder.none,
),
),
),
),
SizedBox(
height: 20.0,
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
InkWell(
child: ChoiceChip(
Icons.flight_takeoff, "Flight", isFlightSelected),
onTap: () {
setState(() {
isFlightSelected = true;
});
},
),
SizedBox(
width: 20.0,
),
InkWell(
child:
ChoiceChip(Icons.hotel, "Hotels", !isFlightSelected),
onTap: () {
setState(() {
isFlightSelected = false;
});
},
),
],
)
],
),
),
),
],
);
}
}
class ChoiceChip extends StatefulWidget {
final IconData icon;
final String text;
final bool isSelected;
ChoiceChip(this.icon, this.text, this.isSelected);
@override
_ChoiceChipState createState() => _ChoiceChipState();
}
class _ChoiceChipState extends State<ChoiceChip> {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 18.0, vertical: 8.0),
decoration: widget.isSelected
? BoxDecoration(
color: Colors.white.withOpacity(0.15),
borderRadius: BorderRadius.all(Radius.circular(20.0)))
: null,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
widget.icon,
size: 20.0,
color: Colors.white,
),
SizedBox(
width: 8.0,
),
Text(
widget.text,
style: TextStyle(color: Colors.white, fontSize: 16.0),
),
],
),
);
}
}