Flutter Android Launcher, apps can't show if container have carousel

Issue

I’m new in Flutter and trying to build an Launcher apps for Android. This is my design for my Launcher apps, there is a Carousel image and the apps is under Carousel

I have develop it until show Carousel like this

The problem is, when i try to show the installed apps under Carousel, it’s always error
This is my code to show the apps. I’m using device_apps plugins

     FutureBuilder(
        future: DeviceApps.getInstalledApplications(
          includeSystemApps: true,
          onlyAppsWithLaunchIntent: true,
          includeAppIcons: true,
        ),
        
        builder: (context, snapshot){
          if(snapshot.connectionState == ConnectionState.done){
            List<Application> allApps = snapshot.data;
            
            return GridView.count(
              scrollDirection: Axis.horizontal,
              crossAxisCount: 3,
              children: List.generate(allApps.length, (index) {
                return Column(
                  children: [
                    Image.memory(
                      (allApps[index] as ApplicationWithIcon).icon,
                      width: 64,
                    ),
                    Text(
                      // ignore: unnecessary_string_interpolations
                      "${allApps[index].appName}",
                      style: const TextStyle(
                        color: Colors.black
                      ),
                      textAlign: TextAlign.center,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    )
                  ],
                );
              }),
            );
          }
          // ignore: avoid_unnecessary_containers
          return Container(
            child: const Center(
              child: CircularProgressIndicator(),
            ),
          );
        },
      )

I add that code to my main.dart like this, but always throw a lot of errors:

// @dart=2.9
// ignore_for_file: use_key_in_widget_constructors
import 'package:device_apps/device_apps.dart';
import 'package:flutter/material.dart';
import 'package:carousel_pro/carousel_pro.dart';

void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),  
    );
  }
}


class Homepage extends StatefulWidget{
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
          title: const Text("Launcher"),
          centerTitle: true,
        ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [
              Colors.blue.shade100,
              Colors.white,
              Colors.white,
              Colors.blue.shade100,
            ],
          )
        ),
        // ignore: avoid_unnecessary_containers
        child: Container(
          padding: const EdgeInsets.only(top: 20.0),
          child: ListView(
            children:[
              SizedBox(
                height: 300.0,
                width: double.infinity,
                child: Padding(
                  padding: const EdgeInsets.only(top: 100.0),
                  child: Carousel(
                    dotSize: 8.0,
                    dotColor: Colors.blue,
                    dotIncreasedColor: Colors.blue.shade200,
                    dotVerticalPadding: 0.0,
                    indicatorBgPadding: 4.0,
                    dotBgColor: Colors.transparent,
                    images: [
                      Padding(padding: const EdgeInsets.only(bottom: 40.0),
                      child: Image.asset('assets/images/GPN.png', scale: 0.2,)),
                      Padding(padding: const EdgeInsets.only(bottom: 40.0),
                      child: Image.asset('assets/images/Visa.png', scale: 0.6,)),
                      Padding(padding: const EdgeInsets.only(bottom: 40.0),
                      child: Image.asset('assets/images/mastercard.png', scale: 0.2,)),
                    ],
                  ),
                ),
              ),
              FutureBuilder(
                future: DeviceApps.getInstalledApplications(
                  includeSystemApps: true,
                  onlyAppsWithLaunchIntent: true,
                  includeAppIcons: true,
                ),
                
                builder: (context, snapshot){
                  if(snapshot.connectionState == ConnectionState.done){
                    List<Application> allApps = snapshot.data;
                    
                    return GridView.count(
                      scrollDirection: Axis.horizontal,
                      crossAxisCount: 3,
                      children: List.generate(allApps.length, (index) {
                        return Column(
                          children: [
                            Image.memory(
                              (allApps[index] as ApplicationWithIcon).icon,
                              width: 64,
                            ),
                            Text(
                              // ignore: unnecessary_string_interpolations
                              "${allApps[index].appName}",
                              style: const TextStyle(
                                color: Colors.black
                              ),
                              textAlign: TextAlign.center,
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            )
                          ],
                        );
                      }),
                    );
                  }
                  // ignore: avoid_unnecessary_containers
                  return Container(
                    child: const Center(
                      child: CircularProgressIndicator(),
                    ),
                  );
                },
              )
            ]
          )
        ),
      )
    );
  }
}

If I remove the Carousel, the Installed apps can shows normally.
I think the problem is how I wrap my FutureBuilder to show the apps like above, but I don’t know how to do it in right way, can someone help me?.

Solution

You can try wrap your code in carousel with Column, and your future builder with Expanded like this

child: Column(
  children: <Widget>[
    // ignore: avoid_unnecessary_containers
    Container(
      child: SizedBox(
        height: 300.0,
        width: double.infinity,
        child: Padding(
          padding: const EdgeInsets.only(top: 80.0, bottom: 25.0),
          child: Carousel(
            dotSize: 8.0,
            dotColor: Colors.blue,
            dotIncreasedColor: Colors.blue.shade200,
            dotVerticalPadding: 0.0,
            indicatorBgPadding: 4.0,
            dotBgColor: Colors.transparent,
            images: [
              Padding(padding: const EdgeInsets.only(bottom: 40.0),
              child: Image.asset('assets/images/OTKA.png', scale: 0.1,)),
              Padding(padding: const EdgeInsets.only(bottom: 40.0),
              child: Image.asset('assets/images/GPN.png', scale: 0.2,)),
              Padding(padding: const EdgeInsets.only(bottom: 40.0),
              child: Image.asset('assets/images/Visa.png', scale: 0.6,)),
              Padding(padding: const EdgeInsets.only(bottom: 40.0),
              child: Image.asset('assets/images/mastercard.png', scale: 0.2,)),
            ],
          ),
        ),
      ),
        
    ),
    Expanded(
      child: FutureBuilder(
        future: DeviceApps.getInstalledApplications(
          includeSystemApps: true,
          onlyAppsWithLaunchIntent: true,
          includeAppIcons: true,
        ),
        
        builder: (context, snapshot){
          if(snapshot.connectionState == ConnectionState.done){
            List<Application> allApps = snapshot.data;
            
            return GridView.count(
              scrollDirection: Axis.horizontal,
              crossAxisCount: 3,
              children: List.generate(allApps.length, (index) {
                return Column(
                  children: [
                    Image.memory(
                      (allApps[index] as ApplicationWithIcon).icon,
                      width: 64,
                    ),
                    Text(
                      // ignore: unnecessary_string_interpolations
                      "${allApps[index].appName}",
                      style: const TextStyle(
                        color: Colors.black
                      ),
                      textAlign: TextAlign.center,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    )
                  ],
                );
              }),
            );
          }
          // ignore: avoid_unnecessary_containers
          return Container(
            child: const Center(
              child: CircularProgressIndicator(),
            ),
          );
        },
      ),
    )
  ]
),

Answered By – Hidayat Taufik

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published