Have you ever read an e-book on your phone or tablet and noticed that the pages don't look quite right when you swipe from one to the next? Maybe the pages get cut off or they don't line up properly. This is a common problem with e-books, but it's one that can be solved with a bit of code.

In this blog post, we'll take a look at a piece of code that can help make your e-book pages look better. This code is used to display pages of information on a screen and it changes the way they look when you swipe from one page to another.

The code is like a magic spell that changes how the pages look when you move from one to another. There are different spells depending on which page you're on and which direction you're going. For example, if you're moving to the next page, the spell makes the new page bigger and more centered, while the old page gets smaller and moves to the side. If you're moving to the previous page, the spell does the opposite: it makes the old page bigger and more centered, while the new page gets smaller and moves to the side.

Let's take a look at the code itself:

Matrix4 matrix = new Matrix4.identity();
//statements = Current slide, Next slide, Previous slide (in that order)
if (index == _currPageValue.floor()) {
  var currScale = 1 - (_currPageValue - index) * (1 - _scaleFactor);
  matrix = Matrix4.diagonal3Values(1, currScale, 1);
  //reduce the height/y-factor on swipe
  var currTrans = _height * (1 - currScale) / 2;
  matrix = Matrix4.diagonal3Values(1, currScale, 1)
    ..setTranslationRaw(0, currTrans, 0);
} else if (index == _currPageValue.floor() + 1) {
  var currScale =
      _scaleFactor * (_currPageValue - index + 1) * (1 - _scaleFactor);
  var currTrans = _height * (1 - currScale) / 2;
  matrix = Matrix4.diagonal3Values(1, currScale, 1);
  matrix = Matrix4.diagonal3Values(1, currScale, 1)
    ..setTranslationRaw(0, currTrans, 0);
} else if (index == _currPageValue.floor() + 1) {
  var currScale =
      _scaleFactor * (_currPageValue - index + 1) * (1 - _scaleFactor);
  matrix = Matrix4.diagonal3Values(1, currScale, 1);
  matrix = Matrix4.diagonal3Values(1, currScale, 1)
    ..setTranslationRaw(0, currScale, 0);
} else {
  var currScale = 0.8;
  matrix = Matrix4.diagonal3Values(1, currScale, 1)
    ..setTranslationRaw(0, _height * (1 - _scaleFactor) / 2, 1);
}

The code uses something called a "matrix" to keep track of the changes that need to happen to each page. The matrix is like a big chart that shows how the page should be moved and resized.

Let's use an image for further illustration. The image below shows how the code logic affects the UI: Current(center), Next(right), and previous(left).

This is a breakdown of the pseudocode:

1. Initialize matrix to identity matrix
2. If the current page index is the same as the current page value rounded down to the nearest integer:
3.    Calculate the current scale factor based on the current page value and the current page index
4.    Apply the current scale factor to the matrix diagonal
5.    Calculate the current vertical translation based on the current scale factor and the page height
6.    Apply the current vertical translation to the matrix
7. Else if the current page index is one more than the current page value rounded down to the nearest integer:
8.    Calculate the current scale factor based on the current page value and the current page index
9.    Apply the current scale factor to the matrix diagonal
10.   Calculate the current vertical translation based on the current scale factor and the page height
11.   Apply the current vertical translation to the matrix
12. Else if the current page index is one less than the current page value rounded down to the nearest integer:
13.   Calculate the current scale factor based on the current page value and the current page index
14.   Apply the current scale factor to the matrix diagonal
15.   Apply a fixed vertical translation to the matrix
16. Else (if the current page index is not adjacent to the current page value):
17.   Apply a default scaling factor to the matrix diagonal
18.   Calculate the default vertical translation based on the page height and the scaling factor
19.   Apply the default vertical translation to the matrix
20. End if/else block

The code is just using math to determine how to change the appearance and position of a page view on the screen. That's it!

Make sure to subscribe if you like this content. Also, leave your feedback and suggestions in the comments. Much appreciated!