So I am learning Flutter again and there is something i need to know i want to fetch data from a REST endpoint and show it on a horizontal Listview.

The Endpoint is

CodePudding user response：

There are lots of ways you could do but since you are using FutureBuilder for your TransactionDetails, here also you should wrap your slider navigation with FutureBuilder of type List<AccountDetails>.

CodePudding user response：

You can use FutureBuilder to call the api and use a ListView to display it horizontally.

SizedBox(
  width: double.infinity,
  height: 175,
  child: FutureBuilder<List<AccountDetails>>(
    future: fetchAccountDetails(),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Center(child: CircularProgressIndicator());
      }
      if (snapshot.hasError) {
        return const Center(
          child: Text('Could not get data'),
        );
      }
      if (snapshot.hasData) {
        List<AccountDetails> accounts = snapshot.data!;
        return ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: accounts.length,
          itemBuilder: (context, index) => Container(
            margin: const EdgeInsets.all(15),
            width: 319,
            height: 100,
            decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                    color: const Color.fromARGB(255, 233, 230, 230)
                        .withOpacity(0.8),
                    spreadRadius: 5,
                    blurRadius: 3,
                    offset: const Offset(
                        0, 7), // changes position of shadow
                  ),
                ],
                color: Colors.green,
                borderRadius: BorderRadius.circular(9)),
            alignment: Alignment.center,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(accounts[index].coin_name ?? ''),
                  Text(
                    '\$ ${(accounts[index].balance ?? 0).toString()}',
                    style: const TextStyle(
                      fontWeight: FontWeight.w600,
                      fontSize: 30,
                    ),
                  ),
                  SizedBox(
                    height: 20,
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 8.0),
                      child: SingleChildScrollView(
                        scrollDirection: Axis.horizontal,
                        child: Expanded(
                            child: Text(
                                accounts[index].address ?? '')),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      } else {
        return const SizedBox();
      }
    },
  ),
),

Hope it helps. Happy Fluttering! You are doing great.