Wall Layout In Flutter

In this article, we will explore the Wall Layout In flutter using the wall_layout_package. With the help of the package, we can easily achieve the flutter Wall Layout. So let’s get started.

flutter_wall_layout | Flutter Package

Table of Contents :

Flutter

Wall Layout

Code Implementation

Code File

Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time, Flutter offers great developer tools, with amazing hot reload”

Wall Layout :

If you want to display a few elements in a specific way without scroll, you may not need WallLayout, and you should look at Stack, Row, Column, Expanded widgets. They may be easier to handle.

Wall Layout advantages are best shown on a big set of rectangle widgets having different sizes. It may appear interesting for a few uses, but you may keep your code as simple as possible, isn’t it?.

Demo Module :

Implementation :

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies :

dependencies:   
flutter_wall_layout: ^1.0.0

Step 2: Importing

import 'package:flutter_wall_layout/flutter_wall_layout.dart';

Step 3: Run flutter package get

Code Implementation :

Create a new dart file called image_wall_layout_demo.dart inside the libfolder.

Before creating the wall layout, we have created a list of an image and defined the image list data in the _createPicture() method, and initialized the image list to initState().

List<_MyPictureData> _picturesData;
@override
void initState() {
  super.initState();
  _animationController = AnimationController(duration: Duration(milliseconds: 2000), vsync: this);
  _picturesData = _createPicturesData();
  _animationController.forward(from: 0.0);
}

Now we will take the WallLayout widget inside which to use its properties. Inside the WallLayout, we have defined the _buildList() method in the stones() property, inside which we used the animation which will animate our image and tap again on the refresh icon in the app bar. Refresh the image and display it.

WallLayout(
  stones: _buildList(),
  layersCount: 3,
  stonePadding: 12.0,
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_wall_layout/flutter_wall_layout.dart';
import 'dart:math';

class ImageWallLayout extends StatefulWidget {
  @override
  _ImageWallLayoutState createState() => _ImageWallLayoutState();
}

class _ImageWallLayoutState extends State<ImageWallLayout>
    with TickerProviderStateMixin {
  AnimationController _animationController;
  List<_MyPictureData> _picturesData;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        duration: Duration(milliseconds: 2000), vsync: this);
    _picturesData = _createPicturesData();
    _animationController.forward(from: 0.0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          "Wall Layout Demo",
          style: TextStyle(color: Colors.black),
        ),
        centerTitle: true,
        // leading: IconButton(icon: Icon(Icons.swap_horizontal_circle), onPressed: __swapLayout,),
        actions: [
          IconButton(
              icon: Icon(
                Icons.replay,
                color: Colors.black,
              ),
              onPressed: __replayAnimation)
        ],
      ),
      body: WallLayout(
        stones: _buildList(),
        layersCount: 3,
        stonePadding: 12.0,
      ),
    );
  }

  void __swapLayout() {
    Navigator.of(context).popAndPushNamed("usecase2");
  }

  void __replayAnimation() {
    _animationController.forward(from: 0.0);
    setState(() {});
  }

  List<_MyPictureData> _createPicturesData() {
    final data = [
      {"name": "assets/images/resort_1.jpg", "width": 1, "height": 1},
      {"name": "assets/images/resort_2.jpg", "width": 2, "height": 1},
      {"name": "assets/images/resort_3.jpg", "width": 1, "height": 2},
      {"name": "assets/images/resort_4.jpg", "width": 1, "height": 1},
      {"name": "assets/images/resort_1.jpg", "width": 2, "height": 2},
      {"name": "assets/images/resort_2.jpg", "width": 1, "height": 1},
      {"name": "assets/images/resort_3.jpg", "width": 1, "height": 1},
      {"name": "assets/images/resort_1.jpg", "width": 2, "height": 1},
      {"name": "assets/images/resort_2.jpg", "width": 1, "height": 2},
      {"name": "assets/images/resort_3.jpg", "width": 2, "height": 2},
      {"name": "assets/images/resort_4.jpg", "width": 1, "height": 1},
      {"name": "assets/images/resort_1.jpg", "width": 3, "height": 1},
    ];
    double length = data.length.toDouble();
    final firstEnd = 0.35;
    return data.map((d) {
      final isFirst = data.indexOf(d) == 0;
      double pos = data.indexOf(d).toDouble();
      return _MyPictureData(
          name: d["name"],
          width: d["width"],
          height: d["height"],
          animatable: CurveTween(
            curve: Interval(
              isFirst ? 0.0 : (firstEnd + (pos / length) * (1.0 - firstEnd)),
              isFirst
                  ? firstEnd
                  : min(1.0,
                      firstEnd + ((pos + 1.0) / length) * (1.0 - firstEnd)),
              curve: isFirst ? Curves.elasticOut : Curves.easeOutBack,
            ),
          ));
    }).toList();
  }

  List<Stone> _buildList() {
    return _picturesData.map((d) {
      return Stone(
        id: _picturesData.indexOf(d),
        width: d.width,
        height: d.height,
        child: ScaleTransition(
          scale: d.animatable.animate(_animationController),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12.0),
              image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage(d.name),
              ),
            ),
          ),
        ),
      );
    }).toList();
  }
}

class _MyPictureData {
  final String name;
  final int width;
  final int height;
  final Animatable animatable;

  _MyPictureData({this.name, this.width, this.height, this.animatable});
}

Conclusion:

In this flutter article, I have explained a Wall Layout in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Feature Wall Layout demo from our side.

I hope this blog will provide you with sufficient information on Trying up the Wall Layout in your flutter project. We will show you the Wall Layout is?, and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.