flutterdart

Background cover


I am trying to cover the red area, full with image in slider. Tried fit: BoxFit.fill but no luck, can someone help me with the problem. Thank you for your help god bless you i don't know what to text more it keep asking me to text more. enter image description here

// ignore_for_file: public_member_api_docs, sort_constructors_first
import 'package:flutter/material.dart';

class HomeSliderItem extends StatelessWidget {
  final bool isActive;
  final String imageAssetPath;
  const HomeSliderItem({
    super.key,
    required this.isActive,
    required this.imageAssetPath,
  });

  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: 20,
      child: AnimatedScale(
        duration: const Duration(milliseconds: 2500),
        scale: isActive ? 1 : 1,
        child: ClipRRect(
          //borderRadius: BorderRadius.circular(0),
          child: Stack(
            children: [
              Image.asset(imageAssetPath),
              Container(
                color: Colors.red,
              ),
              Image.asset(imageAssetPath, fit: BoxFit.fill),
            ],
          ),
        ),
      ),
    );
  }
}


Solution

  • Try below code and add width: double.infinity, for image

    Note: just change your asset image with my network image

      Stack(
          children: [
            Container(
              color: Colors.red,
            ),
            Image.network(
                'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&w=800',
                fit: BoxFit.cover,
              width: double.infinity,
            ),
          ],
        ),
    

    Output Screen