Flutter - The code is telling me that BoxFit is not defined

FRXGFA
October 20, 2023
107 views
0 votes
2 Answers

I’m trying to make an app in Flutter. Its my first time and I stumbled on an error: BoxFit isn't a type The error occurred when I tried to add a background image to the code. I don’t know how to fix it.

Full Error../flutter/packages/flutter/lib/src/painting/decoration_image.dart:485:3: Error: 'BoxFit' isn't a type. BoxFit? fit, ^^^^^^ ../flutter/packages/flutter/lib/src/painting/decoration_image.dart:511:33: Error: Undefined name 'BoxFit'. fit ??= centerSlice == null ? BoxFit.scaleDown : BoxFit.fill;

here is the code

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(const MyApp());
}



class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:
          // ignore: sort_child_properties_last
          DecoratedBox(
        decoration: const BoxDecoration(
          image: DecorationImage(
              image: AssetImage("./assets/Trashban_background.svg"),
              centerSlice: Rect.fromLTRB(50, 50, 50, 50)),
        ),
        child: Center(
            child: Scaffold(
          body: Container(
              padding: const EdgeInsets.only(top: 150),
              child: const TitleText()),
        )),
      ),
    );
  }
}

Answers

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart'; // Import the flutter_svg package

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DecoratedBox(
        decoration: BoxDecoration(
          image: DecorationImage(
            // Use SvgPicture.asset to display the SVG image
            image: SvgPicture.asset(
              "assets/trashban_background.svg", // Adjust the path as needed
              semanticsLabel: 'SVG Image', // Provide a label for accessibility
            ),
            centerSlice: Rect.fromLTRB(50, 50, 50, 50),
          ),
        ),
        child: Center(
          child: Scaffold(
            body: Container(
              padding: const EdgeInsets.only(top: 150),
              child: const TitleText(),
            ),
          ),
        ),
      ),
    );
  }
}

i added fit = BoxFit.fill, try this and let me know if that fixed your issue.

It is important to keep some things in mind while building your Flutter application:

It is a good programming practice to create a separate
stateless/stateful widget for the home page instead of using the
same MyApp widget.
Scaffold should be right at the beginning.
AssetImage doesn’t accept .svg images

Here’s the modified code:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DecoratedBox(
          decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/images/protruding-squares.png'),
                centerSlice: Rect.fromLTRB(50, 50, 50, 50),
            ),
          ),
          child: Center(
            child: Container(
              padding: const EdgeInsets.only(top: 150),
              child: const Text('Hello World'),
            ),
          ),
        ),
      ),
    );
  }
}

Don’t forget to add your assets in pubspec.yaml file

  assets:
    - assets/images/protruding-squares.png

Hence the output:

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – The code is telling me that BoxFit is not defined

Answers