Add title and Subtitle to Listview - flutter

Question

Very new flutter. I know how to add one title to the list. I want to add 2 or more title to the list.
I defined 2 lists as list and subtitle. I think I'm making a mistake giving the index number.
I can't solve how to use lists in ListView.builder.
How can I do about this?
main.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'harf_buyuklugu.dart';
void main() => runApp(defectList());
class todolist extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "PROGRAM",
home: Iskele(),
);
}
}
class Iskele extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Program'),
),
body: AnaEkran(),
);
}
}
class AnaEkran extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Icerik();
}
}
class Icerik extends StatefulWidget {
#override
_IcerikState createState() => _IcerikState();
}
class _IcerikState extends State<Icerik> {
TextEditingController _title_Textfield = TextEditingController();
TextEditingController _subtitleTextfield = TextEditingController();
List<String> title = [];
List<String> subtitle = [];
elemanEkle() {
setState(() {
title.add(_title_Textfield.text);
_title_Textfield.clear();
});
}
elemanCikar() {
title.clear();
_subtitleTextfield.clear();
setState(() {});
}
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(left: 25, right: 25, top: 25),
child: TextField(
maxLength: 100,
controller: _title_Textfield,
inputFormatters: [BuyukHarfTxt()],
minLines: 1,
maxLines: 3,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(60),
),
),
hintText: "Add somethings...",
labelText: "Title",
suffixIcon: IconButton(
onPressed: () => _title_Textfield.clear(),
icon: Icon(Icons.clear),
),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 25, right: 25, top: 25),
child: TextField(
controller: _subtitleTextfield,
inputFormatters: [BuyukHarfTxt()],
minLines: 1,
maxLines: 3,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(60),
),
),
hintText: "Add somethings...",
labelText: "Subtitle",
suffixIcon: IconButton(
onPressed: () => _subtitleTextfield.clear(),
icon: Icon(Icons.clear),
),
),
),
),
Row(
children: [
IconButton(
onPressed: elemanEkle,
icon: Icon(Icons.save),
color: Colors.amber,
iconSize: 50,
),
IconButton(
onPressed: elemanCikar,
icon: Icon(Icons.delete_forever_rounded),
color: Colors.amber,
iconSize: 50,
),
],
),
Flexible(
child: ListView.builder(
itemCount: title.length,
itemBuilder: (context, indeksNumarasi) => ListTile(
title: Text(
'${title[indeksNumarasi]} (${subtitle[indeksNumarasi]})',
),
),
),
)
], //children
),
);
}
}
harf_buyuklugu.dart
import 'package:flutter/services.dart';
class BuyukHarfTxt extends TextInputFormatter {
#override
TextEditingValue formatEditUpdate(
TextEditingValue txtEski, TextEditingValue txtYeni) {
return txtYeni.copyWith(
text: txtYeni.text.toUpperCase(),
);
}
}
Result image
I want this

Answer 1

I have made some changes to your code and commented the changes, Now it works
Copy Paste this code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'harf_buyuklugu.dart';
void main() => runApp(defectList());
class todolist extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "PROGRAM",
home: Iskele(),
);
}
}
class Iskele extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Program'),
),
body: AnaEkran(),
);
}
}
class AnaEkran extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Icerik();
}
}
class Icerik extends StatefulWidget {
#override
_IcerikState createState() => _IcerikState();
}
class _IcerikState extends State<Icerik> {
TextEditingController _title_Textfield = TextEditingController();
TextEditingController _subtitleTextfield = TextEditingController();
List<String> title = [];
List<String> subtitle = [];
elemanEkle() {
setState(() {
title.add(_title_Textfield.text);
subtitle.add(_subtitleTextfield.text); //added this line other wise index error will come
_title_Textfield.clear();
_subtitleTextfield.clear();
});
}
elemanCikar() {
title.clear();
_subtitleTextfield.clear();
setState(() {});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(left: 25, right: 25, top: 25),
child: TextField(
maxLength: 100,
controller: _title_Textfield,
// inputFormatters: [BuyukHarfTxt()],
minLines: 1,
maxLines: 3,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(60),
),
),
hintText: "Add somethings...",
labelText: "Title",
suffixIcon: IconButton(
onPressed: () => _title_Textfield.clear(),
icon: Icon(Icons.clear),
),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 25, right: 25, top: 25),
child: TextField(
controller: _subtitleTextfield,
// inputFormatters: [BuyukHarfTxt()],
minLines: 1,
maxLines: 3,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(60),
),
),
hintText: "Add somethings...",
labelText: "Subtitle",
suffixIcon: IconButton(
onPressed: () => _subtitleTextfield.clear(),
icon: Icon(Icons.clear),
),
),
),
),
Row(
children: [
IconButton(
onPressed: elemanEkle,
icon: Icon(Icons.save),
color: Colors.amber,
iconSize: 50,
),
IconButton(
onPressed: () {
elemanCikar();
},
icon: Icon(Icons.delete_forever_rounded),
color: Colors.amber,
iconSize: 50,
),
],
),
Flexible(
child: ListView.builder(
itemCount: title?.length ?? 0, //when list is null nothing will shows up (some null opeartions)
itemBuilder: (context, indeksNumarasi) => ListTile(
title: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'${title[indeksNumarasi]})',
),
Text("${subtitle[indeksNumarasi]}"),
],
),
subtitle: Container(height: 5, color: Colors.green),
),
),
)
], //children
),
),
);
}
}