0

I am trying to apply the same concept of instagram to go from one feed to another. Here i have like quiz1 part and i want to go to the another quiz2 section on tapping to to the right side and after pressing left side i want to go for quiz1 section.

  Widget mainQuiz() {
return Column(
  children: [
    Spacer(
      flex: 1,
    ),
    Container(
      padding: EdgeInsets.all(30),
      child: Text(
        "When was the first spaceship NOT launched?",
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w600,
          fontSize: 24,
        ),
      ),
    ),
    /* ---------------------OPTION 1----------------------*/
    Container(
      margin: EdgeInsets.only(
        left: 65,
        right: 65,
        bottom: 15,
      ),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(100)),
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.all(10),
            child: Row(
              children: [
                Stack(
                  children: [
                    Container(
                      margin: EdgeInsets.only(right: 10),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all(color: Colors.white),
                        shape: BoxShape.circle,
                      ),
                      child: Icon(
                        Icons.check,
                        size: 15,
                        color: Color(0xffFFC700),
                      ),
                    )
                  ],
                ),
                Text(
                  "Last Tuesday",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ],
            ),
          ),
          Spacer(),
          Container(
            constraints: BoxConstraints.expand(
              height: 40,
              width: 50,
            ),
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(100),
                bottomRight: Radius.circular(100),
              ),
            ),
            child: Center(
              child: Text(
                "55%",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
    /* ---------------------OPTION 2----------------------*/
    Container(
      margin: EdgeInsets.only(
        left: 65,
        right: 65,
        bottom: 15,
      ),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(100)),
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.all(10),
            child: Row(
              children: [
                Stack(
                  children: [
                    Container(
                      margin: EdgeInsets.only(right: 10),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all(color: Colors.white),
                        shape: BoxShape.circle,
                      ),
                      child: Icon(
                        Icons.check,
                        size: 15,
                        color: Color(0xffFFC700),
                      ),
                    )
                  ],
                ),
                Text(
                  "1969",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ],
            ),
          ),
          Spacer(),
          Container(
            constraints: BoxConstraints.expand(
              height: 40,
              width: 50,
            ),
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(100),
                bottomRight: Radius.circular(100),
              ),
            ),
            child: Center(
              child: Text(
                "45%",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
    /* ---------------------OPTION 3----------------------*/
    Container(
      margin: EdgeInsets.only(
        left: 65,
        right: 65,
        bottom: 15,
      ),
      padding: EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(100)),
      child: Row(
        children: [
          Stack(
            children: [
              Container(
                margin: EdgeInsets.only(right: 10),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white),
                  shape: BoxShape.circle,
                ),
                child: SizedBox(
                  height: 15,
                  width: 15,
                ),
              )
            ],
          ),
          Text(
            "1957",
            style: TextStyle(
              color: Colors.white,
              fontSize: 16,
            ),
          ),
        ],
      ),
    ),
    Spacer(
      flex: 2,
    ),
  ],
);
}

enter image description here

like this is quiz one section i want to go to the second quiz section which i can take as same ui

Reema Balmiki
  • 145
  • 1
  • 11

2 Answers2

0

I would wrap your "mainQuiz" inside a Stack widget.

In that way you could add other 2 Containers inside the Stack's children.

Those containers could be positioned using "Positioned" widget. One on the left of the screen and one on the right. You should give then the size too.

I would let them transparent and I would give them a "GestureDetector" or something to detect the tap and call the Navigator to change screen.

L. Gangemi
  • 3,110
  • 1
  • 22
  • 47
  • But i have got a problem here actully after pressing android back button its showing the previous pages but directly it have to return to the main home page – Reema Balmiki Oct 21 '20 at 14:02
  • I don't understand exactly your problem but you could always override the back button behaviour. Here's a question about it: https://stackoverflow.com/questions/49356664/how-to-override-the-back-button-in-flutter – L. Gangemi Oct 23 '20 at 11:19
0

As per your requirement, I think you should use

PageView

By default it has the swipe feature to go to the next and previous screen.

EDIT:- As per you requirements, you know that you have a screen which already have interaction in form of giving answers, which has to be done using clicks. Though you can place empty containers in stack to implement clicks for left right, but as container need to have some width, thus they will overlap with you answers because basic padding is not more than 20. Thus I think you should go for swipe or specified buttons to go the left right i.e next and previous question.

Arpit Awasthi
  • 493
  • 2
  • 8