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

how to add a fullscreen image in flutter

here’s my code and i want a fullscreen image with a centerd button but i won’t get that result , screenshot of app in below the code

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kings of Iran',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WelcomePage(),
    );
  }
}

class WelcomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          "Kings of Iran",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 40.0,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/images/back.jpg"),
                fit: BoxFit.cover,
                alignment: Alignment.center)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 50.0,
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => HomePage()),
                );
              },
              child: Text(
                "Explore",
                style: TextStyle(
                    fontSize: 20.0, color: Color.fromARGB(255, 191, 211, 9)),
              ),
            )
          ],
        ),
      ),
    );
  }
}

and this is the result

app screenshot

How can I make this image fullscreen and button centered?

Tags:

2

Answers


  1. 0

    You can use Stack for display image and display button at center of the screen.

    Stack : https://api.flutter.dev/flutter/widgets/Stack-class.html

    Stack useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the center.

    Example :

        
class WelcomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          "Kings of Iran",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 40.0,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
      body: Stack(
          children: [
            Container(
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage("assets/images/back.jpg"), fit: BoxFit.cover, alignment: Alignment.center))),
             Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  SizedBox(
                    height: 50.0,
                  ),
                Center(child:  ElevatedButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => HomePage()),
                      );
                    },
                    child: Text(
                      "Explore",
                      style: TextStyle(fontSize: 20.0, color: Color.fromARGB(255, 191, 211, 9)),
                    ),
                  ))
                ],
              ),
            
          ],
        )
  }
}
    Login or Signup to reply.
  2. 0

    Just add width: MediaQuery.of(context).size.width in Container

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

Back To Top
Search