Flutter 使用Bg晃动背景图像边界

发布于05月08日

你好，有人可以帮助我吗？我try 编码(在图像上) 我不确定我是否应该在这里使用纸箱或容器或任何其他小部件

import 'package:flutter/material.dart';

class AppHome extends StatefulWidget {
  const AppHome({super.key});

  @override
  State<AppHome> createState() => _AppHomeState();
}

class _AppHomeState extends State<AppHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Center(child: Text('Cats')),
          backgroundColor: Color(0xFF002804),
        ),
        body: Container(
          height: 300,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/1.jpg'),
              fit: BoxFit.fill,
            ),
            shape: BoxShape.rectangle,
          ),
        ));
  }
}

推荐答案

根据您提供的图像，我已经try 下面的代码并获得提供的图像结果，只需用我的更改您的图像

Container(
      margin: EdgeInsets.all(5),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.amber.shade100,
      ),
      child: Container(
        margin: EdgeInsets.all(5),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          border: Border.all(color: Colors.black12),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              margin: EdgeInsets.all(2),
              height: 150,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                image: DecorationImage(
                  image: NetworkImage(
                      'https://media.istockphoto.com/id/1317323736/photo/a-view-up-into-the-trees-direction-sky.jpg?s=612x612&w=0&k=20&c=i4HYO7xhao7CkGy7Zc_8XSNX_iqG0vAwNsrH1ERmw2Q='),
                  fit: BoxFit.fill,
                ),
                shape: BoxShape.rectangle,
              ),
            ),
            const Text('BROWN LIST'),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 10,vertical: 5),
              child: Text(
                'Lorem ipsum dolor sit amet',
              ),
            ),
          ],
        ),
      ),
    ),

Result: