Home Flutter Flow Carousel Menu
Post
Cancel

Flutter Flow Carousel Menu

I am going to discuss how to make a simple carousel menu in the Flutter Flow platform. I will provide the full source code as well.

alt-text-here

We are going to use the following package to help us achieve this:

https://pub.dev/packages/carousel_slider/example

Custom Widget

First, let’s create our custom widget. Click the custom functions tab on the left-hand side of the flutter flow platform

alt-text-here

Now click Add > Widget

Give your new widget a name such as CarouselMenu

alt-text-here

We will need to pass JSON as a parameter to build our menu items. I will discuss this more later. Create a parameter called jsonMenuItems of type JSON.

alt-text-here

Click the green View Boilerplate Code button.

alt-text-here

It should show this screen.

alt-text-here

Click Copy to Editor

Now click Save at the top right of the screen

Under the parameters add the carousel_slider dependency.

alt-text-here

Click Save again. Then click Compile.

Adding JSON menu items to local state

For this example, we are going to store our menu items in Flutter Flow local state. You could also retrieve the JSON from an API.

Click on the Local State tab.

alt-text-here

Now click Add State Variable.

alt-text-here

Add a JSON field. You can name it the same as the parameter we created earlier.

alt-text-here

You can use this example JSON array to populate your menu carousel. This is a JSON Array containing three JSON Objects. Each object is a menu item and contains a title, route, and imageUrl.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
  {
    "title": "HomePageCopy",
    "route": "HomePageCopy",
    "imageUrl": "https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80"
  },
  {
    "title": "Detail",
    "route": "Detail",
    "imageUrl": "https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80"
  },
  {
    "title": "Detail",
    "route": "Login",
    "imageUrl": "https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80"
  }
]

If you look at the Flutter Flow source code you will see they use named routes to navigate in the app using the go router dependency. The route will be each screen’s Scaffold name. You will see this later.

Copy this JSON as the default value for the state variable we just created.

alt-text-here

Save this using Ctrl-S/CMD-S.

Go back to our custom widget so that we may implement the carousel menu.

First, add the import for the carousel_slider dependency.

alt-text-here

Create a class called CarouselItem and put it under _CarouselMenuState. This class will hold each menu item from the JSON.

alt-text-here

Create a list variable of CarouselItem’s.

alt-text-here

Under the carousel item list, let’s override initState. This method get’s called once when the widget first gets created.

https://api.flutter.dev/flutter/widgets/State/initState.html

alt-text-here

Under initState, create a method to build our carousel widgets. This method doing 3 things.

  1. Iterating through each JSON Object in the JSON array.
  2. Creating a CarouselItem object with the current object’s value.
  3. Adding this object to the carouselItems list.

alt-text-here

Let’s change our build method to return the carousel_slider.

alt-text-here

Notice that I have context.pushNamed(route); commented out. This is the code FlutterFlow uses, but in the online editor, it will give you errors when compiling but will work when downloading the project.

There are some workarounds to get it to run on the Flutter Flow platform. Essentially, after you launch the app in test mode, uncomment the code, save it, and click instant reload.

Save and compile what we have so far.

Setting up screens to run our custom widget

Next, go to the Widget Tree tab to create our screens.

Create four screens. One that has our custom widget and three others that the carousel items will navigate to. These are the names that you will use as the route in the custom JSON state.

alt-text-here

On the page/screen you want your custom widget, go to the UI Builder and drag and drop the custom widget.

alt-text-here

Here are my settings for the custom widget.

alt-text-here

Notice I set the JSON variable from our local state JSON variable.

alt-text-here

Save the project and click the run in test mode button on the top right.

To test clicking the menu items, go back to the custom code and uncomment it. Save and then compile it. Go back to Test Mode and click instant reload. This will work fine when you download the code.

alt-text-here

Here is the full source code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
// Automatic FlutterFlow imports
import '../../backend/backend.dart';
import '../../flutter_flow/flutter_flow_theme.dart';
import '../../flutter_flow/flutter_flow_util.dart';
import '../widgets/index.dart'; // Imports other custom widgets
import '../../flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:carousel_slider/carousel_slider.dart';

class CarouselMenu extends StatefulWidget {
  const CarouselMenu({
    Key? key,
    this.width,
    this.height,
    this.jsonMenuItems,
  }) : super(key: key);

  final double? width;
  final double? height;
  final dynamic jsonMenuItems;

  @override
  _CarouselMenuState createState() => _CarouselMenuState();
}

class _CarouselMenuState extends State<CarouselMenu> {
  List<CarouselItem> carouselItems = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    buildCarouselWidgets();
  }

  void buildCarouselWidgets() {
    for (var data in widget.jsonMenuItems) {
      carouselItems
          .add(CarouselItem(data['imageUrl'], data['title'], data['route']));
    }
  }

  @override
  Widget build(BuildContext context) {
    return CarouselSlider.builder(
      itemCount: carouselItems.length,
      itemBuilder: (context, index, realIndex) {
        var item = carouselItems[index];
        var title = item.title;
        var route = item.route;
        var imageUrl = item.imageUrl;
        return GestureDetector(
          onTap: () {
            //context.pushNamed(route);
          },
          child: Column(
            children: [
              Expanded(
                  child:
                      Image.network(imageUrl, fit: BoxFit.cover, width: 1000)),
              Text(title)
            ],
          ),
        );
      },
      options: CarouselOptions(
        autoPlay: false,
        enlargeCenterPage: true,
        aspectRatio: 2.0,
      ),
    );
  }
}

class CarouselItem {
  String imageUrl = "";
  String title = "";
  String route = "";
  CarouselItem(String imageUrl, String title, String route) {
    this.imageUrl = imageUrl;
    this.title = title;
    this.route = route;
  }
}
This post is licensed under CC BY 4.0 by the author.
Contents