crimson-rose-2138

readme.md

crimson-rose-2138

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

// lets define the stateless part of the screen (AppBar, app title, background color...)
class MetaDataAdScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "product informations",
      home:Scaffold(
          appBar: AppBar(title: const Text("My vehicle caracteristics form",textDirection: TextDirection.ltr,),
                         centerTitle: true,
                         backgroundColor: Colors.red),
                         body: ListRowsGenerator(),
                                  ));
  }
}

//let's create a class that take as input the the CategoryCarMetaData Map and return a listView widget containing in each line 
//a represetation of each element of  CategoryCarMetaData.

class ListRowsGenerator extends StatefulWidget{
  @override
  State<StatefulWidget> createState() =>ListListRowsGeneratorState();
}
class ListListRowsGeneratorState extends State {
  String ? valueChosen;
  @override
  Widget build(BuildContext context) {

    List <Widget>ListViewRows=[]; //empty list of widgets that will contain the listview elements

    for (String key in getCategoryCarMetaData().keys){ //for loop to navigate the CategoryCarMetaData and extract data and put it as widget in the ListViewRows
      switch (getCategoryCarMetaData()[key]["type"]){ //depending on type of data, widget that represent it is different
        case "enum": {  //if the type is enum, we will use DropDownButton to display all values allowed so the customer can choose.

             final List itemsList=getCategoryCarMetaData()[key]["values"].toList();
             ListViewRows.add(Center(child: Text(key)));  
             ListViewRows.add(DropdownButton<String>( value: valueChosen,
                                                      isExpanded: true,
                                                      onChanged: (String ?newValue){setState(() {valueChosen=newValue;});},
                                                      items : itemsList.map((e) =>DropdownMenuItem<String>(
                                                                    value: e,
                                                                    child: Text(e))).toList()));
        } break;    
        case "string": { //if the type is String, we will use a TextFormField to let the user Add values with keyboard
             ListViewRows.add(Center(child: Text(key))); 
             ListViewRows.add(TextFormField());
        } break;
        case "date": { //if the type is enum, we will use a TextFormField to Add Date Value
             ListViewRows.add(Center(child: Text(key))); 
             ListViewRows.add(TextFormField());
        } break;
        case "int": { //if the type is int, we will use a TextFormField to Add this Value
             ListViewRows.add(Center(child: Text(key))); 
             ListViewRows.add(TextFormField());
        } break; 
        case "double": { //if the type is int, we will use a TextFormField to Add this Value
             ListViewRows.add(Center(child: Text(key))); 
             ListViewRows.add(TextFormField());
        } break; 
            
        default: { 
             ListViewRows.add(Center(child: Text(key))); 
             ListViewRows.add(TextFormField());
        }
        break; 
  
      } 
    }
  
  return(ListView(children: ListViewRows));
  }

}

/// Get the meta data for the `car` category
Map<String, dynamic> getCategoryCarMetaData() {
 const energies = {
          "icon": Icons.energy_savings_leaf,
          "type": "enum",
          "values": {
              "electric",
              "hybrid",
              "reloaded hybrid",
              "diesel",
              "gas",
              "hydrogen",
              "gpl",
              "lng",
              "other"
            },
        };
  const brands = {
          "icon": Icons.branding_watermark,
          "type": "enum",
          "values": {
              "mercedes-benz",
              "bmw",
              "renault",
              "citroën",
              "peugeot",
              "opel",
              "vw",
              "simca",
              "ford",
              "gm",
              "cadillac",
              "other"
            },
        };

  const types = {
          "icon": Icons.type_specimen,
          "type": "enum",
          "values": {"sedan", "suv", "pickup", "truck", "semitruck", "other"},
        };
  return {
          "type": types,
          "energy": energies,
          "brand": brands,
          "model": {"type": "string"},
          "date": {
            "icon": Icons.calendar_today,
            "type": "date",
          },
          "power": {"icon": Icons.power, "type": "int", "unit": "CV"}
        };
}

/* DropDown Button Template
string ? valueChosen;
final List valueChosen=["tap1","tap2","tap3"];
DropdownButton<String>( value: valueChosen,
                        onChanged: (newValue){setState(() {valueChosen=newValue;});},
                        items : itemsList.map((e) =>DropdownMenuItem<String>(value: e,
                                                                             child: Text(e))).toList())
*/




/*
Intro
It's about creating a simple application, which allows a user to feed a form allowing him to create the description data relating to the car he wants to sell 🚗 .
The information will be returned to elastic search from the application.Then you'll build a screen allowing him to build a search filter, run it, and finally display the results on the screen. He can then tap on it to view all the data.
The peculiarity here is that the form is not known in advance: it will be downloaded from a remote server: outside the scope of this work, you will hard code the description in the code meanwhile as I show in the wiki .

You are asked to deliver:
Step 1: Create ClassifiedAdMetaDataFormScreen screen that takes the category metadata from a Map<String, dynamic> and presents the related form built on the fly;
Step 2: Make the final evolution of the previous screen that also stores the data in the Firestore collection testClassifiedAd.
Step 3: Create ClassifiedAdSearchEngineScreen screen that enable the user to build a filter interactively according to the category metadata;
Step 4: Make the final evolution of the previous screen to actually build and run the request from the generated filter and create the ClassifiedAdSearchEngineResultsScreen screen that displays the results.
Have fun!

for the solution explanation go to : README.md

*/ 





void main() {
  runApp(  MetaDataAdScreen());
}