Stack으로 배경container 넣음, BookItem 이미지 아래에 책이름 표시

하단에 overflow 되는 문제 Flexible() 위젯으로 해결
kangsudal · Nov 5, 2019 · fef6d1a · fef6d1a
1 parent d10ec70
commit fef6d1a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/lib/page/book_item.dart b/lib/page/book_item.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 
 class BookItem extends StatelessWidget {
 
-  // final String bookName;
+  final String bookName='book name';
   // final int bookNum;
 
   // const BookItem({Key key, this.bookName, this.bookNum}) : super(key: key);
@@ -15,7 +15,12 @@ class BookItem extends StatelessWidget {
     return Padding(
         padding: const EdgeInsets.all(8.0),
         child: 
-            image
+            Column(
+              children: <Widget>[
+                Flexible(child: image),
+                Text('$bookName')
+              ],
+            )
 
     );
   }

diff --git a/lib/page/shelfdetailpage.dart b/lib/page/shelfdetailpage.dart
@@ -53,11 +53,16 @@ class _ShelfDetailPageState extends State<ShelfDetailPage> {
           )
         ],
       ),
-      body: 
-        Center(
-          child: Container(
-            padding: EdgeInsets.only(top:10),
-            color: Colors.deepPurple[300],
+      body: Stack(
+        children: <Widget>[
+          Container(
+            decoration: new BoxDecoration(
+              color: Colors.deepPurple[300],
+            ),
+          ),
+          Container(
+            padding: EdgeInsets.only(top: 10),
+
             child: GridView.builder(
               shrinkWrap: true,
               itemCount: _bookCounter,
@@ -66,8 +71,9 @@ class _ShelfDetailPageState extends State<ShelfDetailPage> {
               itemBuilder: _buildItem,
             ),
           ),
-        )
-      ,
+        ],
+      ),
+
       floatingActionButton: FloatingActionButton(
         onPressed: _incrementCounter,
         tooltip: 'Increment',