How to add multiple String using Constructor class in Flutter - flutter

Question

I made two widgets and called them in main.dart. I want the AntiRaggingCell widget in HomePage class to take in details of different Strings like Name, Label, Department, Phone No., Contact and Email. What my code does now is that I have to put in every detail in AntiRaggingDetailChip so the code becomes messy.
My code,
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
final Color antiRaggingCellBorderColor = Color(0xFFE6E6E6);
final Color chipBackgroundColor = Color(0xFFF6F6F6);
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Squad',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Squad'),
),
body: SafeArea(
child: ListView.builder(
itemBuilder: (context, index) {
return Column(
children: <Widget>[
AntiRaggingCell(),
AntiRaggingCell(),
AntiRaggingCell(),
AntiRaggingCell(),
AntiRaggingCell(),
],
);
},
shrinkWrap: true,
itemCount: 1,
physics: ClampingScrollPhysics(),
),
),
);
}
}
class AntiRaggingCell extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
border: Border.all(color: Colors.black),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Center(
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
spacing: 8.0,
children: <Widget>[
AntiRaggingDetailChip(Icons.person, 'Maruf Hassan'),
AntiRaggingDetailChip(Icons.label, 'Chairman'),
AntiRaggingDetailChip(Icons.mail, 'maruf#gmail.com'),
AntiRaggingDetailChip(Icons.phone, '1234567890'),
Center(
child: AntiRaggingDetailChip(Icons.account_balance,
'Computer Science & Engineering'),
),
],
),
),
],
),
),
),
),
],
);
}
}
class AntiRaggingDetailChip extends StatelessWidget {
final IconData iconData;
final String label;
AntiRaggingDetailChip(this.iconData, this.label);
#override
Widget build(BuildContext context) {
return RawChip(
label: Text(label),
labelStyle: TextStyle(color: Colors.black, fontSize: 14.0),
backgroundColor: chipBackgroundColor,
avatar: Icon(iconData),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
);
}
}
I want this code to take input like this
body: SafeArea(
child: ListView.builder(
itemBuilder: (context, index) {
return Column(
children: <Widget>[
AntiRaggingCell('Aman Khan','Member','abc#gmail.com','123545894', 'MTECH'),
AntiRaggingCell('Wasim Khan','President','abc#gmail.com','123545894'),
AntiRaggingCell('Afzal Khan','Member','abc#gmail.com','123545894'),
AntiRaggingCell('Arman Khan','Member','abc#gmail.com','123545894'),
AntiRaggingCell('Kalam Khan','Member','abc#gmail.com','123545894'),
],
);
},

Answer 1

simply add a constructor with the parameters you want.
Here is an example
final name;
final email;
const MyApp({Key key, this.name, this.email}) : super(key: key);

Answer 2

import 'package:flutter/material.dart';
class AntiRaggingCell extends StatelessWidget {
final String name;
final String position;
final String email;
final String phone;
final String org;
AntiRaggingCell(this.name, this.position, this.email, this.phone, {this.org});
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
border: Border.all(color: Colors.black),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Center(
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
spacing: 8.0,
children: <Widget>[
AntiRaggingDetailChip(Icons.person, 'Maruf Hassan'),
AntiRaggingDetailChip(Icons.label, 'Chairman'),
AntiRaggingDetailChip(Icons.mail, 'maruf#gmail.com'),
AntiRaggingDetailChip(Icons.phone, '1234567890'),
Center(
child: AntiRaggingDetailChip(Icons.account_balance,
'Computer Science & Engineering'),
),
],
),
),
],
),
),
),
),
],
);
}
}
Call this class like this:
children: <Widget>[
AntiRaggingCell('Aman Khan','Member','abc#gmail.com','123545894', org:'MTECH'),
AntiRaggingCell('Wasim Khan','President','abc#gmail.com','123545894'),
AntiRaggingCell('Afzal Khan','Member','abc#gmail.com','123545894'),
AntiRaggingCell('Arman Khan','Member','abc#gmail.com','123545894'),
AntiRaggingCell('Kalam Khan','Member','abc#gmail.com','123545894'),
],
);
If you need more field like this just put them into the angular bracket.

Answer 3

I found the answer. Just needed to declare constructor and call it.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
final Color antiRaggingCellBorderColor = Color(0xFFE6E6E6);
final Color chipBackgroundColor = Color(0xFFF6F6F6);
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Squad',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Anti-Ragging Squad'),
),
body: SafeArea(
child: ListView.builder(
itemBuilder: (context, index) {
return Column(
children: <Widget>[
AntiRaggingCell(name: 'Maruf Hassan', position: 'Chairman',email: 'maruf#gmail.com',phone: '012354695425', dept: 'Mathematics & Statistics',),
AntiRaggingCell(),
],
);
},
shrinkWrap: true,
itemCount: 1,
physics: ClampingScrollPhysics(),
),
),
);
}
}
class AntiRaggingCell extends StatelessWidget {
final String name;
final String position;
final String email;
final String phone;
final String dept;
AntiRaggingCell({this.name, this.position, this.email, this.phone, this.dept});
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
border: Border.all(color: Colors.black),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Center(
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
spacing: 8.0,
children: <Widget>[
AntiRaggingDetailChip(Icons.person, name),
AntiRaggingDetailChip(Icons.label, position),
AntiRaggingDetailChip(Icons.mail, email),
AntiRaggingDetailChip(Icons.phone, phone),
Center(child: AntiRaggingDetailChip(Icons.account_balance, dept),
),
],
),
),
],
),
),
),
),
],
);
}
}
class AntiRaggingDetailChip extends StatelessWidget {
final IconData iconData;
final String label;
AntiRaggingDetailChip(this.iconData, this.label);
#override
Widget build(BuildContext context) {
return RawChip(
label: Text(label),
labelStyle: TextStyle(color: Colors.black, fontSize: 14.0),
backgroundColor: chipBackgroundColor,
avatar: Icon(iconData),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
);
}
}