· 6 years ago · Mar 19, 2020, 11:06 AM
1import 'package:flutter/material.dart';
2
3class BookPage extends StatefulWidget {
4 static String tag = 'book';
5
6 const BookPage({Key key}) : super(key: key);
7
8 @override
9 _BookPageState createState() => _BookPageState();
10}
11
12class _BookPageState extends State<BookPage> {
13 @override
14 Widget build(BuildContext context) {
15 return Scaffold(
16 appBar: AppBar(
17 title: Text("Book"),
18 ),
19 body: SingleChildScrollView(
20 child: Column(
21 children: <Widget>[
22 Padding(
23 padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
24 child: Container(
25 height: 50.0,
26 width: double.infinity, // basically get full width of device
27 decoration: BoxDecoration(
28 borderRadius: BorderRadius.circular(10.0), // ni curve tiap corner container untuk nampak efek card
29 color: Colors.grey[300]
30 ),
31 child: TextField(
32 textInputAction: TextInputAction.search,
33 decoration: InputDecoration(
34 hintText: "Search search apa?", // "PlAceHolDeR"
35 border: InputBorder.none,
36 contentPadding: EdgeInsets.only(left: 15.0, top: 15.0),
37 suffixIcon: IconButton(
38 icon: Icon(Icons.search),
39 onPressed: (){},
40 iconSize: 30.0,
41 )
42 ),
43 onChanged: (val) {
44 setState(() {
45 // record user input here
46 }
47 );
48 },
49 onSubmitted: (term) {
50 // get user input & get result from API
51 },
52 ),
53 ),
54 ),
55 Padding(
56 padding: EdgeInsets.symmetric(horizontal: 20,vertical: 10),
57 child: Container(
58 height: MediaQuery.of(context).size.height * 0.2,
59 child: Placeholder(), // sini nanti kau replace dengan image kau
60 ),
61 ),
62 InkWell(
63 onTap: () {}, // sini buat function kau
64 child: Container(
65 padding: EdgeInsets.all(10),
66 width: MediaQuery.of(context).size.width * 0.8,
67 decoration: BoxDecoration(
68 border: Border.all()
69 ),
70 child: Text("Category",textAlign: TextAlign.center,),
71 ),
72 ),
73 SizedBox(height: 20,),
74 Align(
75 alignment: Alignment.topLeft,
76 child: Padding(
77 padding: EdgeInsets.symmetric(horizontal: 20,vertical: 5),
78 child: Text("Hot Deals",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20),)
79 ,),
80 ),
81 Container(
82 height: 200, // listview builder yg horizontal perlukan fixed height so wrap dalam container & set height
83 child: ListView.builder(
84 shrinkWrap: true,
85 scrollDirection: Axis.horizontal, // nak scroll horizontal ke vertical
86 itemCount: 5, // ada berapa kotak dalam list
87 itemBuilder: (context, snapshot) {
88 return Container(
89 width: 200,
90 height: 200,
91 decoration: BoxDecoration(
92 borderRadius: BorderRadius.circular(20),
93 border: Border.all()
94 ),
95 child: Text("somthing",textAlign: TextAlign.center,)
96 );
97 },
98 ),
99 ),
100 SizedBox(height: 20,),
101 Align(
102 alignment: Alignment.topLeft,
103 child: Padding(
104 padding: EdgeInsets.symmetric(horizontal: 20,vertical: 5),
105 child: Text("Shout Out",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20),)
106 ,),
107 ),
108 Container(
109 height: 200,
110 child: ListView.builder(
111 shrinkWrap: true,
112 scrollDirection: Axis.horizontal,
113 itemCount: 5,
114 itemBuilder: (context, snapshot) {
115 return Container(
116 width: 200,
117 height: 200,
118 decoration: BoxDecoration(
119 borderRadius: BorderRadius.circular(20),
120 border: Border.all()
121 ),
122 child: Text("somthing",textAlign: TextAlign.center,)
123 );
124 },
125 ),
126 )
127 ],
128 ),
129 ),
130 floatingActionButton: FloatingActionButton( // button biru yg dekat bawah kanan
131 onPressed: () => print("pressed"),
132 elevation: 4,
133 child: Icon(Icons.add),
134 ),
135 );
136 }
137}