title: flutter dot indicator to pageview
body: <p>I want to add a dot indicator to pageview. When a person scrolls the image to the right to left image changes on my code. NO problem with there but I couldn't manage to add a dot indicator to my code. How can I put a dot indicator when I scroll across images also the dots switch to the order of images.........................................................................................................</p>
  <pre><code>                            PageView.builder(
                      itemCount: totalCards.toInt(),
                      itemBuilder: (context, i) {
                        return Container(
                            margin: EdgeInsets.only(top: 10),
                            child: Container(
                              child: Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: &lt;Widget&gt;[
                                  Expanded(
                                    child: PageView(
                                      children: &lt;Widget&gt;[
                                        Container(
                                          decoration: BoxDecoration(
                                              borderRadius:
                                                  BorderRadius.circular(4.0),
                                              image: DecorationImage(
                                                  image: AssetImage(
                                                      photos[startphoto]),
                                                  fit: BoxFit.cover)),
                                        ),
                                        Container(
                                          decoration: BoxDecoration(
                                              borderRadius:
                                                  BorderRadius.circular(4.0),
                                              image: DecorationImage(
                                                  image: AssetImage(
                                                      photos[startphoto1]),
                                                  fit: BoxFit.cover)),
                                        ),
                                        Container(
                                          decoration: BoxDecoration(
                                              borderRadius:
                                                  BorderRadius.circular(4.0),
                                              image: DecorationImage(
                                                  image: AssetImage(
                                                      photos[startphoto2]),
                                                  fit: BoxFit.fitHeight)),
                                        ),
                                        Container(
                                          decoration: BoxDecoration(
                                              borderRadius:
                                                  BorderRadius.circular(4.0),
                                              image: DecorationImage(
                                                  image: AssetImage(
                                                      photos[startphoto3]),
                                                  fit: BoxFit.cover)),
                                        ),
  
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            )
                        );
                      },
                    ),
                  ),
  </code></pre>