Repo Request: Example that utilizes flutter

[kyeshmz]

Description Currently, it seems that the example is in basic dart, but a flutter example would be great for starting out. This basic code below does not seem to work with homebrew meilisearch instance that is ran, populated with the example script, giving a Unhandled Exception: An error occurred while trying to connect to the Meilisearch instance:.

It seems to not work both with a masterKey or without a masterKey.

Are there precautions to running something like this in a simulator? Would also be down to create a PR for a simple example.

Basic example If the proposal involves something new or a change, include a basic example. How would you use the feature? In which context?

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:meilisearch/meilisearch.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  late MeiliSearchClient client;
  late MeiliSearchIndex index;
  late TextEditingController controller;

  final documents = [
    {
      'id': 1,
      'title': 'Carol',
      'genres': ['Romance', 'Drama']
    },
    {
      'id': 2,
      'title': 'Wonder Woman',
      'genres': ['Action', 'Adventure']
    },
    {
      'id': 3,
      'title': 'Life of Pi',
      'genres': ['Adventure', 'Drama']
    },
    {
      'id': 4,
      'title': 'Mad Max: Fury Road',
      'genres': ['Adventure', 'Science Fiction']
    },
    {
      'id': 5,
      'title': 'Moana',
      'genres': ['Fantasy', 'Action']
    },
    {
      'id': 6,
      'title': 'Philadelphia',
      'genres': ['Drama']
    },
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    client = MeiliSearchClient('http://127.0.0.1:7700', 'masterKey');
    index = client.index('movies');
    controller = TextEditingController();
    // If the index 'movies' does not exist, Meilisearch creates it when you first add the documents.

  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: TextField(
          controller: controller,
          onChanged: (value) async {
            log(value.toString());
            var result = await index.search(value);

            print(result.hits);
          },
        ),
      ),
      body: Center(

        child: Column(

          children: [
            ListView(
                shrinkWrap: true,
                children: documents.map((e) {
                  return ListTile(
                    title: Text(e['title'] as String),
                    // subtitle: Text(e['genres'][0] as String),
                  );
                }).toList())
          ],
        ),
      ),
    // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Other Any other things you want to add.

[ahmednfwela]

the problem here is that your IP "127.0.0.1" won't work when used in an android emulator, check this: https://developer.android.com/studio/run/emulator-networking

to fix it, you need to use 10.0.2.2 OR deploy your meilisearch instance to a temporary server, e.g. using https://cloud.meilisearch.com which has a very good free tier for testing

[kyeshmz]

@ahmednfwela Hey thanks! Using the cloud solved my problem, it still would be great having an example repo for utilizing this in flutter

[ahmednfwela]

I don't think that's needed since the package is not dependent on flutter, and the api is just basic dart Futures

[bidoubiwa]

Hey! Just to let you know @brunoocasali is on Holiday and will answer your question once he comes back

[kyeshmz]

I dont know, I think it would be cool to have a couple of pre built uis for people to test, but maybe its up to the team

[brunoocasali]

@ahmednfwela do you think having multiple directories into "example" in this repository is possible without breaking what pub.dev expects?

Because if it is possible, it is a good idea. But just having a code snippet in the README is not worth it because it would be hard to maintain (there is no highlight if there is a syntax error, for example, so less code there, the better).

[ahmednfwela]

welcome back @brunoocasali 🎉

I don't think that pub would play nice with this idea (yet)

but I can try creating one and see what would happen

[kyeshmz]

The highlighted text part is just one of the good things that come out of a flutter example, thanks meilisearch team! Feel free to close this when the PR goes through

[brunoocasali]

Thank you, @kyeshmz, but the merits are exclusive to @ahmednfwela, who is "just" incredible! 🎉 🎉

[ahmednfwela]

@kyeshmz would you close this in favor of #283 ?