Flutter - change body according to the screen
Homescreen
I want when one of the logos is clicked, that the models of exactly this brand are shown, currently I got just so far to show the [models of the first brand].2 So no matter which screen you click, always that appears. How can I change my code, that the specific brand models appear?
I only posted the crucial code, here Im navigating to the page ,,Model Page" (but I think its not relevant, because Im guessing that the problematic lays in the displaying of the body (2nd code)
import 'package:flutter/material.dart';
import 'package:flutter_meineapp/Indexes/Marken.dart';
import 'package:flutter_meineapp/Screen/Home/BodyHomescreen.dart';
import 'package:flutter_meineapp/Screen/Kontakt/Kontakt.dart';
import 'package:flutter_meineapp/Screen/Modelle/Modelle.dart';
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _selectedIndex = 0;
List<Widget> _widgetOptions = <Widget> [
Container(
color: Color(0xffDDBEA9),
child: GridView.builder(
itemCount: modelle.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (context,index) =>
BodyHomescreen(
modell: modelle[index], press: () => Navigator.push(
context, MaterialPageRoute(
builder: (context) => Modelle( modell: modelle[index],)
,)
),
),
),
),
Text("Text2"),
Kontakt()
];
And here is the model page, Im guessing that I somehow need to change the body according to the Index, but after my research I couldn't find a solution, any suggestions?
class Modelle extends StatelessWidget {
final Modell modell;
const Modelle({Key key, this.modell}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [
Container(
width: 50,
child: Image.asset(modell.image),
),
],
title: Text(modell.title),
centerTitle: true,
backgroundColor: Color(0xffCB997E),
),
body: ListView.builder(
itemCount: ModelleAlfaRomeo.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(ModelleAlfaRomeo[index].title),
);
},
),
);
}
code for Class ,,Modell"
class Modell {
final String image, title;
final int id;
Modell({
this.image,
this.title,
this.id,
});
}
List<Modell> modelle = [
Modell(
id: 1,
title: "Alfa Romeo",
image: "Assets/Images/AlfaRomeo.png"
),
Modell(
id: 2,
title: "Audi",
image: "Assets/Images/Audi.png"
),
Modell(
id: 3,
title: "BMW",
image: "Assets/Images/BMW.png"
),
Modell(
id: 4,
title: "Chevrolet",
image: "Assets/Images/Chevrolet.png"
),
Modell(
id: 5,
title: "Citroen",
image: "Assets/Images/Citroen.png"
),
Modell(
id: 6,
title: "Dacia",
image: "Assets/Images/Dacia.png"
),
Modell(
id: 7,
title: "Fiat",
image: "Assets/Images/Fiat.png"
),
Modell(
id: 8,
title: "Ford",
image: "Assets/Images/Ford.png"
),
Modell(
id: 9,
title: "Honda",
image: "Assets/Images/Honda.png"
),
Modell(
id: 10,
title: "Hyundai",
image: "Assets/Images/Hyundai.png"
),
Modell(
id: 11,
title: "Jaguar",
image: "Assets/Images/Jaguar.png"
),
Modell(
id: 12,
title: "Jeep",
image: "Assets/Images/Jeep.png"
),
Modell(
id: 13,
title: "KIA",
image: "Assets/Images/KIA.png"
),
Modell(
id: 14,
title: "LandRover",
image: "Assets/Images/LandRover.png"
),
Modell(
id: 15,
title: "Lexus",
image: "Assets/Images/Lexus.png"
),
Modell(
id: 16,
title: "Mazda",
image: "Assets/Images/Mazda.png"
),
Modell(
id: 17,
title: "Mercedes",
image: "Assets/Images/Mercedes.png"
),
Modell(
id: 18,
title: "Mini",
image: "Assets/Images/Mini.png"
),
Modell(
id: 19,
title: "Mitsubishi",
image: "Assets/Images/Mitsubishi.png"
),
Modell(
id: 20,
title: "Nissan",
image: "Assets/Images/Nissan.png"
),
Modell(
id: 21,
title: "Opel",
image: "Assets/Images/Opel.png"
),
Modell(
id: 22,
title: "Peugeot",
image: "Assets/Images/Peugeot.png"
),
Modell(
id: 23,
title: "Porsche",
image: "Assets/Images/Porsche.png"
),
Modell(
id: 24,
title: "Renault",
image: "Assets/Images/Renault.png"
),
Modell(
id: 25,
title: "Saab",
image: "Assets/Images/Saab.png"
),
Modell(
id: 26,
title: "Seat",
image: "Assets/Images/Seat.png"
),
Modell(
id: 27,
title: "Skoda",
image: "Assets/Images/Skoda.png"
),
Modell(
id: 28,
title: "Smart",
image: "Assets/Images/Smart.png"
),
Modell(
id: 29,
title: "Subaru",
image: "Assets/Images/Subaru.png"
),
Modell(
id: 30,
title: "Suzuki",
image: "Assets/Images/Suzuki.png"
),
Modell(
id: 31,
title: "Toyota",
image: "Assets/Images/Toyota.png"
),
Modell(
id: 32,
title: "Volvo",
image: "Assets/Images/Volvo.png"
),
Modell(
id: 33,
title: "VW",
image: "Assets/Images/VW.png"
),
];
code for class ModelleAlfaRomeo -> is exactly structured as all the other classes that depict the models of the car brands
class ModellAlfaRomeo {
final String title;
final int id;
ModellAlfaRomeo({
this.title,
this.id,
});
}
List<ModellAlfaRomeo> ModelleAlfaRomeo = [
ModellAlfaRomeo(
id: 1,
title: "147" ,
),
ModellAlfaRomeo(
id: 2,
title: "156 / Crosswagon Q4" ,
),
ModellAlfaRomeo(
id: 3,
title: "159" ,
),
ModellAlfaRomeo(
id: 4,
title: "166" ,
),
ModellAlfaRomeo(
id: 5,
title: "4c" ,
),
ModellAlfaRomeo(
id: 6,
title: "Brera" ,
),
ModellAlfaRomeo(
id: 7,
title: "GT" ,
),
ModellAlfaRomeo(
id: 8,
title: "Giulia (Typ 952)" ,
),
ModellAlfaRomeo(
id: 9,
title: "Giulietta (Typ 940)" ,
),
ModellAlfaRomeo(
id: 10,
title: "MiTo" ,
),
ModellAlfaRomeo(
id: 11,
title: "Spider" ,
),
ModellAlfaRomeo(
id: 12,
title: "Stelvio" ,
),
];
tried today to embed the code from all the classes like ModelleAlfaRomeo, ModelleChevrolet, in this ,,Modell" class, don't really know how to do it yet
Here's how you would architect your classes:
/// model.dart
import 'model_make.dart';
class Model {
final int id;
final String title;
final String image;
final List<ModelMakeData> modelData;
Model({
required this.image,
required this.title,
required this.id,
required this.modelData,
});
/// Create your models on the fly
List<Model> models = [
// AlphaRomeo model
Model(
id: 1,
title: "AlphaRomeo",
image: "Assets/Images/AlfaRomeo.png",
modelData : <ModelMakeData>[
ModelMakeData(
id: 1,
title: "147" ,
),
ModelMakeData(
id: 2,
title: "156 / Crosswagon Q4",
),
ModelMakeData(
id: 3,
title: "159",
),
// other data go here....
]
);
// Audi model
Model(
id: 2,
title: "Audi",
image: "Assets/Images/Audi.png",
modelData: <ModelMakeData>[
// Audi's data go here ...
]
);
//other models go here ...
];
Create an other file to hold the model data
/// model_make.dart
class ModelMakeData{
final int id;
final String title;
const ModelMakeData({
required this.id,
required this.title,
})
}
To use the class in your widget you would do:
/// home_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_meineapp/Indexes/Marken.dart';
import 'package:flutter_meineapp/Screen/Home/BodyHomescreen.dart';
import 'package:flutter_meineapp/Screen/Kontakt/Kontakt.dart';
import 'package:flutter_meineapp/Screen/Modelle/Modelle.dart';//<--- update to point to model.dart
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _selectedIndex = 0;
List<Widget> _widgetOptions = <Widget> [
Container(
color: Color(0xffDDBEA9),
child: GridView.builder(
itemCount: models.length,// <--- updated
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (context,index) =>
BodyHomescreen(
modell: models[index], press: () => Navigator.push(
context, MaterialPageRoute(
builder: (context) => Modelle( modell: models[index],)
,)
),
),
),
),
Text("Text2"),
Kontakt()
];
And in the Modelle widget you do:
class Modelle extends StatelessWidget {
final Model modell;
const Modelle({Key key, this.modell}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [
Container(
width: 50,
child: Image.asset(modell.image),
),
],
title: Text(modell.title),
centerTitle: true,
backgroundColor: Color(0xffCB997E),
),
body: ListView.builder(
itemCount: modell.modelData.length,// <--- now you are getting modelData!
itemBuilder: (context, index) {
return ListTile(
title: Text(modell.modelData[index].title), // <--- Updated
);
},
),
);
}
Note Although this solution is OK. I would recommend creating a json file where you store all of your static data and use
json_annotationalong withjson_serializableto generate your class form it. You can read more about this here Your json file would look something like:// cars json data [ { "id":1, "title": "Alfa Rome", "image": "Assets/Images/AlfaRomeo.png", "modelData":[ { "id": 1, "title": "147" , } { "id": 2, "title": "156 / Crosswagon Q4" , } { "id": 3, "title": "159" , } ], }, { "id":2, "title": "Audi", "image": "Assets/Images/Audi.png", "modelData":[ { "id": 1, "title": } //whatever list of data you have for audi ], } ]