Programming For Students: flutter lists

Showing posts with label flutter lists. Show all posts

FLUTTER - MAPS AND LISTS

Code used in the video:

main.dart

import 'package:flutter/material.dart';
import 'package:lessons/widget_creator.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _schoolIdController = TextEditingController();
  TextEditingController _nameController = TextEditingController();
  TextEditingController _courseController = TextEditingController();

  List<Map<String, dynamic>> _studentList = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: [
              createHeaders("Flutter University hehehe", "Working with Maps"),
              vSpacer(10.0),
              createTextField(
                  controller: _schoolIdController, labelText: "School ID"),
              vSpacer(10.0),
              createTextField(controller: _nameController, labelText: "Name"),
              vSpacer(10.0),
              createTextField(
                  controller: _courseController, labelText: "Course"),
              vSpacer(10.0),
              ElevatedButton(
                onPressed: () {
                  saveRecord(_schoolIdController.text, _nameController.text,
                      _courseController.text);
                },
                style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                child: const Text(
                  "Save",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void saveRecord(String schoolId, String name, String course) {
    // declare the map
    Map<String, dynamic> _studentMap = {
      "schoolId": schoolId,
      "name": name,
      "course": course
    };
    // assign values to the map
    // _studentMap["schoolId"] = schoolId;
    // _studentMap["name"] = name;
    // _studentMap["course"] = course;
    // add the map to the list
    _studentList.add(_studentMap);
    // print the list
    print(_studentList);
    print(_studentList[0]["name"]);
  }
}

widget_creator.dart

Widget createTextField(
    {required TextEditingController controller,
    bool obscureText = false,
    required String labelText}) {
  return TextField(
    controller: controller,
    obscureText: obscureText,
    decoration: InputDecoration(
      labelText: labelText,
      border: OutlineInputBorder(
        borderSide: const BorderSide(
          width: 1,
          color: Colors.blue,
        ),
        borderRadius: BorderRadius.circular(
          5.0,
        ),
      ),
    ),
  );
}

DISPLAY LIST IN A LISTVIEW - BASIS DATA STRUCTURE IN DART/FLUTTER

Code as seen in the video:

import 'package:flutter/material.dart';
import 'package:lessons/widget_creator.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller = TextEditingController();
  List<String> _namesList = ["Micky", "Donald", "Goofy", "Pluto"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: [
              createHeaders("Flutter University hehehe", "Working with Lists"),
              vSpacer(10.0),
              createTextField(
                  _controller, "Name", "Enter your name here", Icons.abc),
              vSpacer(10.0),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _namesList.add(_controller.text);
                    _namesList.sort();
                  });
                },
                style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                child: const Text(
                  "Add To List",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              vSpacer(15.0),
              Expanded(
                child: createListview(),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget createListview() {
    return ListView.builder(
      itemCount: _namesList.length,
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            title: Text(_namesList[index]),
            onTap: () => showDialogBox("Selected Student", _namesList[index]),
          ),
        );
      },
    );
  }

  void showDialogBox(String title, String content) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text(title),
            content: Text(content),
            actions: [
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: const Text(
                  "Close",
                ),
              ),
            ],
          );
        });
  }
}

WORKING WITH LISTS - BASIC DATA STRUCTURE IN DART/FLUTTER

Code as seen in the video:

main.dart

import 'package:flutter/material.dart';
import 'package:lessons/widget_creator.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller = TextEditingController();
  List<String> _namesList = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: [
              createHeaders("Flutter University hehehe", "Working with Lists"),
              vSpacer(10.0),
              createTextField(
                  _controller, "Name", "Enter your name here", Icons.abc),
              vSpacer(10.0),
              ElevatedButton(
                onPressed: () {
                  _namesList.add(_controller.text);
                  print(_namesList);
                  print("First Student: ${_namesList.first}");
                  print("Last Student: ${_namesList.last}");
                  print("Student at index 0: ${_namesList[0]}");
                  print("Number of students: ${_namesList.length}");
                },
                style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                child: const Text(
                  "Add To List",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void showDialogBox(String title, String content) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text(title),
            content: Text(content),
            actions: [
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: const Text(
                  "Close",
                ),
              ),
            ],
          );
        });
  }
}

Programming For Students

FLUTTER - MAPS AND LISTS

DISPLAY LIST IN A LISTVIEW - BASIS DATA STRUCTURE IN DART/FLUTTER

WORKING WITH LISTS - BASIC DATA STRUCTURE IN DART/FLUTTER

AI PILIPINO MUSIC

About This Blog

Labels