Oktay Çağlar
Oktay Çağlar

Reputation: 21

How to code dynamic FlipCard List with FutureBuilder in Flutter

I am very new at flutter and I tried writing "body: new ListView.builder....." but it does not work, I am getting always red underline. Can you help me to fix this. I am getting the data to the flipcards from json albüm so I think I must use future builder

This is what it looks like, I want multiple cards according to the elements from json:

screenshot

Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          title: const Center(
            child: Text(
              "Main",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22.0),
            ),
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25.0),
          ),
          backgroundColor: Colors.green[600],
        ),
        body: Center(
          child: FutureBuilder<Album>(
            future: futureAlbum,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView(
                  children: [
                    const SizedBox(height: 10),
                    Container(
                      margin: const EdgeInsets.all(15.0),
                      height: 200,
                      width: 350,
                      child: FlipCard(
                        direction: FlipDirection.HORIZONTAL,
                        front: Container(
                          ....................
                        ),
                        back: Container(
                         .......................
                        ),
                      ),
                    ),
                  ],
                );
              } else if (snapshot.hasError) {
                return ListView(
                  children: [
                    SizedBox(height: 10),
                    Container(
                      margin: const EdgeInsets.all(15.0),
                      height: 200,
                      width: 350,
                      child: FlipCard(
                        direction: FlipDirection.HORIZONTAL,
                        front: Container(
                          
                        back: Container(
                          
                        ),
                      ),
                    ),
                  ],
                );
              }
            },
          ),
        ),
      ),
    );
  }

Upvotes: 2

Views: 200

Answers (0)

Related Questions