how to add background image to flutter and where exactly

Question

this is my code. Im trying to add backgroundImage to my app. Its my first app, im learning and Im completely new in dev. Im trying and dont know where and what excatly put in to my code. here is my code. Thanks guys for helping.. :)

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                backgroundImage: AssetImage('images/Screenshot_3.png'),
                radius: 111,
              ),
              SizedBox(height: 60),
              Text(
                'Mateusz Ptak',
                style: GoogleFonts.anton(
                  fontSize: 40,
                ),
              ),
              Text(
                'Flutter Developer',
                style: GoogleFonts.allura(
                  fontSize: 40,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Does this solve your problem? https://stackoverflow.com/questions/44179889/how-do-i-set-background-image-in-flutter — zabaykal, Dec 16 '21 at 18:05

score 1 · Accepted Answer · answered Dec 17 '21 at 02:32

try this:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(/* your image */),
            fit: BoxFit.cover,
          ),
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                backgroundImage: AssetImage('images/Screenshot_3.png'),
                radius: 111,
              ),
              SizedBox(height: 60),
              Text(
                'Mateusz Ptak',
                style: GoogleFonts.anton(
                  fontSize: 40,
                ),
              ),
              Text(
                'Flutter Developer',
                style: GoogleFonts.allura(
                  fontSize: 40,
                ),
              ),
            ],
          ),
        ),
      ),
      ),
    );
  }
}

how to add background image to flutter and where exactly

1 Answers1