Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Background Image Border with Bg

Hello can someone help me with this. I try to code(on the image)
I am not sure if i should use cardbox or container here or anyother widget

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,
          ),
        ));
  }
}

Image

Image2

Tags:

2

Answers


  1. 0

    I don’t understand correctly what you mean but if you’re talking about making something similar you can try this:

       Container(
      decoration: BoxDecoration(
          border: Border.all(color: Colors.black, width: 1)),
      height: ...,
      width: ...,
      child: Column(
        children: [
          Image.asset('assets/images/1.jng'),
          const Text('BROWN LIST'),
          const Text('lorem ipsum dollar sit amet'),
        ],
      ),
   ))

    Or if you’re talking about the rendered image not fitting you can just add a width to your container like:

        Container(
      height: 300,
      width: 300,
      ...);
    Login or Signup to reply.
  2. 0

    As per your provided image I have try below code and getting the provided image result, just change your image with my

    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: image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search