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