best-flutter / flutter_swiper

The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS.
MIT License
3.51k stars 715 forks source link

add dynamic widget #7

Open nitneuq33000 opened 6 years ago

nitneuq33000 commented 6 years ago

hello, i search to add card horizontal caroussel to my current vertical card listview. my cards are dynamics with some widgets. flutter swiper can make an horizontal caroussel in this case ? or can it be add to your plugin ? thank you

jzoom commented 6 years ago

could you paste some codes or images ?

nitneuq33000 commented 6 years ago

i tried to put this code exemple in one caroussel card

                               new Card(
                                  elevation: 2.0,
                                  child: new Stack(
                                    alignment: AlignmentDirectional.center,
                                    children: <Widget>[
                                      new Container(
                                        child: new Image.network(staticMapUri.toString()),
                                      ),
                                      FractionalTranslation(
                                        translation: Offset(0.0, 0.0),
                                        child: new Container(
                                          alignment: new FractionalOffset(0.0, 0.0),
                                          decoration: new BoxDecoration(
                                            border: new Border.all(
                                              color: Colors.lightBlue.withOpacity(0.5),
                                              width: GPS2/3.4,
                                            ),
                                            shape: BoxShape.circle,
                                          ),
                                        ),
                                      ),
                                      new Container(
                                        //padding: const EdgeInsets.only(bottom:10.0),
                                        margin: new EdgeInsets.all(140.0),

                                        child : Icon(Icons.location_on, color: Colors.white, size: 25.0),
                                      ),
                                    ],
                                  ),
                                ),

and this code in another caroussel

new Card( elevation: 2.0, color: Colors.white, child :new Stack( children: [ Column ( children: [ Container ( padding: const EdgeInsets.all(10.0),), new CircularPercentIndicator( fillColor: Colors.white, radius: 100.0, lineWidth: 10.0, animation: true, percent: bat2, center: new Text( "$bat3%", style: new TextStyle(fontWeight: FontWeight.normal, fontSize: 20.0), ), footer: new Text( "Batterie", style: new TextStyle(fontWeight: FontWeight.normal, fontSize: 17.0), ), circularStrokeCap: CircularStrokeCap.round, progressColor: Colors.lightBlue, ), ], ),

                              new Column(
                                children: <Widget>[
                                  new Row (
                                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                      children: <Widget>[
                                        Column (
                                          children: <Widget>[
                                            Container (
                                              padding: const EdgeInsets.only(top :40.0),),
                                            new ScaleTransition(
                                              scale: _animation10,
                                              alignment: FractionalOffset.center,
                                              child :   new CircularPercentIndicator(
                                                fillColor: Colors.white,
                                                radius: 70.0,
                                                lineWidth: 5.0,
                                                animation: false,
                                                percent: 1.0,
                                                center: new Icon(
                                                  Icons.hearing,
                                                  size: 30.0,
                                                  color: Colors.grey.shade400,
                                                ),
                                                footer: new Text(
                                                  "     Ecoute\n silencieuse",
                                                  style:
                                                  new TextStyle(fontWeight: FontWeight.normal, fontSize: 15.0),
                                                ),
                                                circularStrokeCap: CircularStrokeCap.round,
                                                progressColor: Colors.grey.shade400,
                                              ),
                                            ),
                                          ],
                                        ),

                                        new Column(
                                          children: <Widget>[

                                            Container (
                                              padding: const EdgeInsets.only(top :160.0),),

                                            new ScaleTransition(
                                              scale: _animation11,
                                              alignment: FractionalOffset.center,
                                              child :   new CircularPercentIndicator(
                                                fillColor: Colors.white,
                                                radius: 70.0,
                                                lineWidth: 5.0,
                                                animation: false,
                                                percent: 1.0,
                                                center: new Icon(
                                                  Icons.battery_alert,
                                                  size: 30.0,
                                                  color: Colors.grey.shade400,
                                                ),
                                                footer: new Text(
                                                  "Batterie \n  faible",
                                                  style:
                                                  new TextStyle(fontWeight: FontWeight.normal, fontSize: 15.0),
                                                ),
                                                circularStrokeCap: CircularStrokeCap.round,
                                                progressColor: Colors.grey.shade400,
                                              ),

                                            ),
                                          ],
                                        ),

                                        Container (
                                          padding: const EdgeInsets.all(1.0),),

                                        Column (
                                          children: <Widget>[
                                            Container (
                                              padding: const EdgeInsets.only(top :160.0),),
                                            new ScaleTransition(
                                              scale: _animation12,
                                              alignment: FractionalOffset.center,
                                              child :   new CircularPercentIndicator(
                                                fillColor: Colors.white,
                                                radius: 70.0,
                                                lineWidth: 5.0,
                                                animation: false,
                                                percent: 1.0,
                                                center: new Icon(
                                                  Icons.notifications_off,
                                                  size: 30.0,
                                                  color: Colors.grey.shade400,
                                                ),
                                                footer: new Text(
                                                  "Décrochage \n       auto",
                                                  style:
                                                  new TextStyle(fontWeight: FontWeight.normal, fontSize: 15.0),
                                                ),
                                                circularStrokeCap: CircularStrokeCap.round,
                                                progressColor: Colors.grey.shade400,
                                              ),
                                            ),
                                          ],
                                        ),

                                        Column (
                                          children: <Widget>[
                                            Container (
                                              padding: const EdgeInsets.only(top :40.0),),
                                            new ScaleTransition(
                                              scale: _animation13,
                                              alignment: FractionalOffset.center,
                                              child :   new CircularPercentIndicator(
                                                fillColor: Colors.white,
                                                radius: 70.0,
                                                lineWidth: 5.0,
                                                animation: false,
                                                percent: 1.0,
                                                center: new Icon(
                                                  Icons.trending_down,
                                                  size: 30.0,
                                                  color: Colors.green.shade400,
                                                ),
                                                footer: new Text(
                                                  "Détection \n de chute",
                                                  style:
                                                  new TextStyle(fontWeight: FontWeight.normal, fontSize: 15.0),
                                                ),
                                                circularStrokeCap: CircularStrokeCap.round,
                                                progressColor: Colors.green.shade400,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ]
                                  ),
                                  Container (
                                    padding: const EdgeInsets.all(10.0),),
                                ],
                              )
                            ],
                          ),
                        ),
jzoom commented 6 years ago

it seems no problem here. You can find the code here

https://github.com/best-flutter/flutter_swiper/blob/master/example/lib/src/ExampleSwiperInScrollView.dart

image

nitneuq33000 commented 6 years ago

thank you for this example I understand for add dynamics widget, but in the exemple there are 2 swipers with 2 widget in different index, how to add this dynamics widget in different index but in the same swiper ? thank you

2018-08-12 10:17 GMT+02:00 Xueliang Ren notifications@github.com:

it seems no problem here. You can find the code here

https://github.com/best-flutter/flutter_swiper/blob/ master/example/lib/src/ExampleSwiperInScrollView.dart

[image: image] https://user-images.githubusercontent.com/6038236/44000059-325b0486-9e4b-11e8-90a5-10709538a40f.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/best-flutter/flutter_swiper/issues/7#issuecomment-412326745, or mute the thread https://github.com/notifications/unsubscribe-auth/Ak3JsYFaYa5t-iXSup-AT3p2sR8wgx7yks5uP-SigaJpZM4Vtu_R .

nitneuq33000 commented 6 years ago

I found It's ok thank you :)

2018-08-18 9:21 GMT+02:00 quentin guichot vlrb33@gmail.com:

thank you for this example I understand for add dynamics widget, but in the exemple there are 2 swipers with 2 widget in different index, how to add this dynamics widget in different index but in the same swiper ? thank you

2018-08-12 10:17 GMT+02:00 Xueliang Ren notifications@github.com:

it seems no problem here. You can find the code here

https://github.com/best-flutter/flutter_swiper/blob/master/ example/lib/src/ExampleSwiperInScrollView.dart

[image: image] https://user-images.githubusercontent.com/6038236/44000059-325b0486-9e4b-11e8-90a5-10709538a40f.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/best-flutter/flutter_swiper/issues/7#issuecomment-412326745, or mute the thread https://github.com/notifications/unsubscribe-auth/Ak3JsYFaYa5t-iXSup-AT3p2sR8wgx7yks5uP-SigaJpZM4Vtu_R .