Screen That I want to develop

I'm new in Flutter Basically, I want to add these images on a top-off background like boxes is there any way to do this and screen be responsive on multiple devices this is what I start to do but it seems to be complex for me

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/images/background.png"),
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(
                    Colors.black.withOpacity(0.75), BlendMode.darken),
              ),
            ),
          ),
          SafeArea(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  child: Image.asset(
                    "assets/images/72.png",
                    fit: BoxFit.cover,
                  ),
                ),
              ],
            ),
          ),

        ],
      ),
    );
  }
}

CodePudding user response：

This is an idea how you can achieve in your design:

for the boxes, you need to use flutter_staggered_grid_view

StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: 8,
  itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.white,
          child: new Text('$index'),
        ),
      )),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 2 : 1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
)

your structure can be:

      Scaffold
        SafeArea
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/images/background.png"),
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(
                    Colors.black.withOpacity(0.75), BlendMode.darken),
              ),
            ),
            child: StaggeredGridView
          ),

CodePudding user response：

Try this :

• Stack
  • Scaffold
    • body
      • StaggeredGridView
      • Custom bottom navigation bar
  • Image

Wrap your Scaffold Inside stack, why ? because by default Scaffold using SafeArea, and you didn't need safe area for the background, you only need SafeArea for the AppBar, Menu, And CustomButtomNav only (referring to picture)

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/images/background.png"),
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(
                    Colors.black.withOpacity(0.75), BlendMode.darken,
                ),
              ),
            ),
          ),
          Scaffold(
          body: Column(
            children:[
              StaggeredGridView(
              /// Put your staggered view here
              ),
              CustomBottomNav(
              /// Put your custom bottom here
              ),
            ]
          )
        ),
      ],
    );
  }
}

I am not gonna deep into staggered & custom bottom nav, btw this is some advice. There is a design UI & UX Guideline, i highly recommend you to follow these guideline, so you don't have to do some research and testing for the UI Component while developing it in flutter, unless you have large team. check it here : (https://material.io/develop/flutter)