简体   繁体   中英

How to make Flutter Carousel Card

How to create flutter carousel card widget for flutter web as shown in this image using list of images and name? must be 3 card in default view

[Click link to see the image please][1]

card

[1]: https://i.stack.imgur.com/BjJfY.png**strong text**

  body: Center(
      child: SingleChildScrollView(
        child: Column(
          children: [
            Text(
              'Who will be the next PM of india in 2022?',
              style: TextStyle(
                color: Colors.black,
                fontSize: 25,
                fontWeight: FontWeight.w300,
              ),
            ),
            SizedBox(
                height: 450,
                child: GridView.builder(
                  physics: const BouncingScrollPhysics(
                      parent: AlwaysScrollableScrollPhysics()),
                  itemCount: 6,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      // childAspectRatio: 0.689,
                      childAspectRatio: 0.489,
                      crossAxisSpacing: 5,
                      mainAxisSpacing: 15,
                      crossAxisCount:
                          (MediaQuery.of(context).size.width ~/ 250).toInt()
                      // crossAxisCount: 3
                      ),
                  itemBuilder: (_, index) {
                    return Stack(
                      alignment: Alignment.center,
                      children: <Widget>[
                        // background image and bottom contents
                        Padding(
                          padding: const EdgeInsets.all(18.0),
                          child: Column(
                            children: <Widget>[
                              Container(
                                decoration: new BoxDecoration(
                                    image: new DecorationImage(
                                        fit: BoxFit.fill,
                                        image: new AssetImage(
                                          assets_cover[index],
                                        )
                                        // image: new AssetImage(
                                        //     'images/congress.png')
                                        )),
                                height: 200.0,
                              ),
                              Expanded(
                                child: Container(
                                  color: Colors.white,
                                  child: Center(
                                    // child: Text('Content goes here'),
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      children: [
                                        Text(
                                          title[index],
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 20),
                                        ),
                                        SizedBox(
                                          height: 5,
                                        ),
                                        ElevatedButton(
                                          onPressed: () {
                                            _signUpBox(context);
                                          },
                                          style: ElevatedButton.styleFrom(
                                              elevation: 12.0,
                                              textStyle: const TextStyle(
                                                  color: Colors.white)),
                                          child: const Text('VOTE'),
                                        ),
                                        Divider(
                                          color: Colors.grey,
                                        ),
                                        Container(
                                            alignment: Alignment.topCenter,
                                            margin: EdgeInsets.all(20),
                                            child: LinearProgressIndicator(
                                              minHeight: 15,
                                              value: 0.59,
                                              valueColor:
                                                  new AlwaysStoppedAnimation<
                                                          Color>(
                                                      Colors
                                                          .green.shade400),
                                              backgroundColor: Colors.grey,
                                            )),
                                        Text(
                                          '59%',
                                          style: TextStyle(
                                              color: Colors.blue,
                                              fontSize: 25),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                        // Profile image
                        Positioned(
                          top:
                              150.0, // (background container size) - (circle height / 2)
                          child: Container(
                            height: 100.0,
                            width: 100.0,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                image: DecorationImage(
                                    fit: BoxFit.fill,
                                    //  image: new AssetImage('images/gandhi.jpeg'),
                                    image: new AssetImage(
                                      assets[index],
                                    ))),
                          ),
                        )
                      ],
                    );
                  },
                )),
            BottomBar(),
          ],
        ),
      ),
    ),

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM