我怎样才能让这个封面看起来像一本真正的书？

Question

我喜欢 iBooks 中的这本书设计，并且一直想知道它是否可以用 flutter 轻松制作？

我想要什么：

原创

我试试这个：

Container(
  width: 150,
  height: 200,
  decoration: BoxDecoration(
    
    border: Border(
      right: BorderSide(
        color: Colors.grey,
        width: 5,
      ),
    ),
    
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.3),
        spreadRadius: 2,
        blurRadius: 4,
        offset: Offset(2, 2),
      ),
    ],
  ),
  child: Stack(
    children: [
      // The book cover image
      Image.network(
        audiobook.artwork,
        fit: BoxFit.contain,
      ),
      
    ],
  ),
),

Answer 1

您可以使用容器和嵌套的行和列小部件来创建此布局，

这是示例代码

Container(
        child: Column(
          children: [
            Padding(
              padding:  const EdgeInsets.fromLTRB(10,20,10,0),
              child: Image.network("https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg"),
            ),
             const Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                
                Padding(
                  padding:  EdgeInsets.only( left: 20),
                  child: Text("Left widget"),
                ),
                Padding(
                  padding:  EdgeInsets.only(right: 20
                  ),
                  child: Text("right widget"),
                )
              ],
            ),
            const SizedBox(height: 40),
            const Divider(),
            const Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                
                Padding(
                  padding:  EdgeInsets.only( left: 20),
                  child: Text("Left widget"),
                ),
                Padding(
                  padding:  EdgeInsets.only(right: 20
                  ),
                  child: Text("right widget"),
                )
              ],
            ),

          ],
        ),
      ),

输出：