Flutter Android 启动器，应用无法显示容器是否有轮播

Question

我是 Flutter 的新手，正在尝试为 Android 构建启动器应用程序。这是我的 design 我的 Launcher 应用程序，有一个 Carousel 图片，应用程序在 Carousel

下

我一直在开发它，直到像 this

一样展示 Carousel

问题是，当我尝试在 Carousel 下显示已安装的应用程序时，总是出错这是我显示应用程序的代码。我正在使用 device_apps 插件

     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(),
            ),
          );
        },
      )

我像这样将代码添加到我的 main.dart，但总是抛出很多错误：

// @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(),
                    ),
                  );
                },
              )
            ]
          )
        ),
      )
    );
  }
}

如果我删除轮播，已安装的应用程序可以正常显示。我认为问题是我如何包装我的 FutureBuilder 以显示上面的应用程序，但我不知道如何以正确的方式做到这一点，有人可以帮助我吗？

Answer 1

您可以尝试使用 Column 将您的代码包装在 carousel 中，并像这样使用 Expanded 包装您未来的构建器

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(),
            ),
          );
        },
      ),
    )
  ]
),

Flutter Android 启动器，应用无法显示容器是否有轮播

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

android

android-launcher

flutter