How to make a middle container different from the other two?

Question

From this post, I copied and modified color: Colors.blue instead of color: index % 2 == 0 ? Colors.blue : Colors.red

The full code after I modified like this:

class Carroussel extends StatefulWidget {
  @override
  _CarrousselState createState() => new _CarrousselState();
}

class _CarrousselState extends State<Carroussel> {
  PageController controller;
  int currentpage = 0;

  @override
  initState() {
    super.initState();
    controller = new PageController(
      initialPage: currentpage,
      keepPage: false,
      viewportFraction: 0.5,
    );
  }

  @override
  dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Container(
          child: new PageView.builder(
              onPageChanged: (value) {
                setState(() {
                  currentpage = value;
                });
              },
              controller: controller,
              itemBuilder: (context, index) => builder(index)),
        ),
      ),
    );
  }

  builder(int index) {
    return new AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        double value = 1.0;
        if (controller.position.haveDimensions) {
          value = controller.page - index;
          value = (1 - (value.abs() * .5)).clamp(0.0, 1.0);
        }

        return new Center(
          child: new SizedBox(
            height: Curves.easeOut.transform(value) * 300,
            width: Curves.easeOut.transform(value) * 250,
            child: child,
          ),
        );
      },
      child: new Container(
        margin: const EdgeInsets.all(8.0),
        color: Colors.blue,
      ),
    );
  }
}

That produces the following a slideshow:

Now I want middle container should be different from the other two. I mean the middle container can has border, shadow ....

How can I do that?

Use ternary operator on every property you want as follows: border: currentpage == value ? Colors.black : Colors.white — Bilaal Abdel Hassan, Jun 25 '20 at 17:43
Its just an example to make you understand how you can modify only the center one. — Bilaal Abdel Hassan, Jun 25 '20 at 17:43
@BilaalAbdelHassan It's mean I can't change style of middle container? — Alex, Jun 25 '20 at 17:49

Marci · Answer 1 · 2020-06-25T18:14:18.127

1

To realize customize color, border and shadow you can add this to your Container Widget:

child: new Container(
    margin: const EdgeInsets.all(8.0),
    decoration: BoxDecoration(
      color: index == currentpage ? Colors.red : Colors.blue,
      border: index == currentpage ? Border.all(width: 5.0) : Border.symmetric(),
      boxShadow: [
        BoxShadow(
          color: index == currentpage ? Colors.grey.withOpacity(0.5) : Colors.white,
          spreadRadius: 5,
          blurRadius: 7,
          offset: Offset(0, 3), // changes position of shadow
        ),
      ],
    ),
  ),

edited Jun 25 '20 at 18:14

answered Jun 25 '20 at 17:58

Marci

180
1
1
13

1

ah you will make it that the middle container is every time with customized settings no matter which index is selected? Had i understand this correct? When yes than it must index == currentpage :) – Marci Jun 25 '20 at 18:08

How to make a middle container different from the other two?

1 Answers1