What We Built

I built a Flutter application called Custom Recipes that allows users to generate recipes based on the ingredients they have. Users can add ingredients, generate recipes, view detailed recipe instructions, and save their favorite recipes. The app uses Firebase for authentication and shared preferences for storing favorite recipes locally.

Demo

You can try the app by downloading the apk file from:
https://we.tl/t-DkX8zfPKHz

Here are some screenshots of the app:
Login screen:

Home screen:

Favorites screen:

Recipe generation screen:

Generated recipes screen:

Repo

You can find the public GitHub repository for the project here: Custom Recipes GitHub Repo

Copilot Experience

Throughout the development process, I used GitHub Copilot extensively. Here are some ways I utilized Copilot:

Prompts

  • Prompt: "Generate a Flutter widget for inputting ingredients with suggestions."

  - Result: Copilot generated a widget using the Autocomplete widget to provide ingredient suggestions as the user types.

  ```dart

  Autocomplete(

    optionsBuilder: (TextEditingValue textEditingValue) {

      if (textEditingValue.text.isEmpty) {

        return const Iterable.empty();

      }

      return _suggestions.where((String option) {

        return option.toLowerCase().contains(textEditingValue.text.toLowerCase());

      });

    },

    onSelected: (String selection) {

      _addIngredient(selection);

    },

    fieldViewBuilder: (BuildContext context, TextEditingController textEditingController, FocusNode focusNode, VoidCallback onFieldSubmitted) {

      _ingredientController.text = textEditingController.text;

      return TextField(

        controller: textEditingController,

        focusNode: focusNode,

        decoration: InputDecoration(labelText: 'Enter Ingredient'),

      );

    },

  )

  ```

  • Prompt: "Fetch recipes based on ingredients using an API."

  - Result: Copilot generated a function to fetch recipes from the Spoonacular API based on the ingredients provided by the user.

  ```dart

  Future _fetchRecipes() async {

    final String ingredients = _ingredients.join(',');

    final response = await http.get(Uri.parse(

        'https://api.spoonacular.com/recipes/findByIngredients?ingredients=$ingredients&apiKey=YOUR_API_KEY'));

    if (response.statusCode == 200) {

      setState(() {

        _recipes = json.decode(response.body);

      });

      Navigator.push(

        context,

        MaterialPageRoute(

          builder: (context) => RecipeListView(recipes: _recipes),

        ),

      );

    } else {

      throw Exception('Failed to load recipes');

    }

  }

  ```

  • Prompt: "Display detailed recipe instructions."

  - Result: Copilot generated a widget to display detailed recipe instructions, including the recipe image, title, ingredients, and instructions.

  ```dart

  body: ListView(

    padding: const EdgeInsets.all(16.0),

    children: [

      ClipRRect(

        borderRadius: BorderRadius.circular(10.0),

        child: Image.network(widget.recipe['image']),

      ),

      const SizedBox(height: 16.0),

      Text(

        widget.recipe['title'],

        style: Theme.of(context).textTheme.headline5,

      ),

      const SizedBox(height: 16.0),

      Text(

        'Ingredients',

        style: Theme.of(context).textTheme.headline6,

      ),

      const SizedBox(height: 8.0),

      ...widget.recipe['ingredients'].map((ingredient) {

        return Text('- $ingredient', style: Theme.of(context).textTheme.bodyText2);

      }).toList(),

      const SizedBox(height: 16.0),

      Text(

        'Instructions',

        style: Theme.of(context).textTheme.headline6,

      ),

      const SizedBox(height: 8.0),

      Text(widget.recipe['instructions'], style: Theme.of(context).textTheme.bodyText2),

      Edit: Added a favorite button to the RecipeDetailView with visual feedback.

Result: Copilot suggested using IconButton with conditional icon and color based on the favorite status.

      IconButton(

        icon: Icon(

          _isFavorite ? Icons.favorite : Icons.favorite_border,

          color: _isFavorite ? Colors.red : Colors.white,

        ),

        onPressed: _toggleFavorite,

      )

    ],

  )

  ```

GitHub Models

I used GitHub Models to prototype LLM capabilities in my app. Specifically, I leveraged the models to generate code for handling user authentication with Firebase and managing shared preferences for storing favorite recipes. The models helped streamline the development process and provided valuable insights into best practices.

Conclusion

Building the Custom Recipes app with GitHub Copilot was an enriching experience. Copilot's assistance significantly accelerated the development process and improved the overall quality of the code. The app has the potential to make meal planning easier and more enjoyable for users by providing personalized recipe suggestions based on available ingredients.

Submition

Our team members are:

  • jose_correia_05ef7ade5fdd
  • duartejcfreitas

Author Of article : Jose Correia Read full article