Ui 3

  

NotesApp Screen

# UI

# HomeScreen Code

import 'package:flutter/material.dart';
import 'package:ui_3/core/constant/color.dart';
import 'package:ui_3/core/data/notes_data.dart';
import 'package:ui_3/view/screens/add_notes_screen.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen>
    with SingleTickerProviderStateMixin {
  late TabController controller;
  @override
  void initState() {
    controller = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => AddEditNotesScreen(
                  isEdit: false,
                ),
              ),
            );
          },
          child: const Icon(Icons.add),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                    color: Colors.black54.withOpacity(0.3),
                    offset: Offset(0, 20),
                    blurRadius: 20)
              ],
              color: Colors.black54,
              borderRadius: BorderRadius.circular(20),
            ),
            child: TabBar(
              dividerColor: Colors.transparent,
              controller: controller,
              tabs: [
                Icon(Icons.home),
                Icon(Icons.person),
                Icon(Icons.settings),
              ],
            )),
        body: TabBarView(
          controller: controller,
          children: [
            ListView.builder(
              itemCount: notesData.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  padding: EdgeInsets.all(10),
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      color: tileColors[index % tileColors.length]),
                  child: ListTile(
                    title: Text(notesData[index].title,
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                        )),
                    subtitle: Text(
                      notesData[index].subtitle,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: 15,
                      ),
                    ),
                    leading: IconButton(
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => AddEditNotesScreen(
                              isEdit: true,
                              index: index,
                            ),
                          ),
                        );
                      },
                      icon: Icon(Icons.edit),
                    ),
                    trailing: IconButton(
                      onPressed: () {
                        setState(() {
                          notesData.removeAt(index);
                        });
                      },
                      icon: Icon(Icons.delete),
                    ),
                  ),
                );
              },
            ),
            Center(
              child: Text('profile'),
            ),
            Center(
              child: Text('settings'),
            ),
          ],
        ));
  }
}

# AddEditNotesScreen Code

import 'package:flutter/material.dart';
import 'package:ui_3/core/data/notes_data.dart';
import 'package:ui_3/core/model/notes_model.dart';
import 'package:ui_3/view/screens/home_screen.dart';

class AddEditNotesScreen extends StatefulWidget {
  final bool isEdit;
  final int? index;
  const AddEditNotesScreen({
    super.key,
    required this.isEdit,
    this.index,
  });

  @override
  State<AddEditNotesScreen> createState() => _AddEditNotesScreenState();
}

class _AddEditNotesScreenState extends State<AddEditNotesScreen> {
  late TextEditingController titleController, bodyController;
  @override
  void initState() {
    titleController = TextEditingController();
    bodyController = TextEditingController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    if (widget.isEdit) {
      titleController.text = notesData[widget.index!].title;
      bodyController.text = notesData[widget.index!].subtitle;
    }
    return Scaffold(
      body: Center(
        child: ListView(
          padding: EdgeInsets.symmetric(horizontal: 10),
          shrinkWrap: true,
          children: [
            Form(
              child: Column(
                children: [
                  TextFormField(
                    controller: titleController,
                    decoration: InputDecoration(
                      hintText: 'Note title',
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  TextFormField(
                    controller: bodyController,
                    decoration: InputDecoration(
                      hintText: 'Note body',
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 10,
            ),
            ElevatedButton(
              onPressed: () {
                if (widget.isEdit) {
                  notesData[widget.index!].title = titleController.text;
                  notesData[widget.index!].subtitle = bodyController.text;
                  Navigator.of(context).pushAndRemoveUntil(
                      MaterialPageRoute(
                          builder: (context) => const HomeScreen()),
                      (route) => false);
                } else {
                  notesData.add(
                    NotesModel(
                      title: titleController.text,
                      subtitle: bodyController.text,
                    ),
                  );
                  Navigator.of(context).pushAndRemoveUntil(
                      MaterialPageRoute(
                          builder: (context) => const HomeScreen()),
                      (route) => false);
                }
              },
              style: ElevatedButton.styleFrom(
                minimumSize: Size(50, 50),
                backgroundColor: Colors.amberAccent,
              ),
              child: Text(widget.isEdit ? ' Edit Note' : 'Add Note'),
            )
          ],
        ),
      ),
    );
  }
}

# Model && Data Code

class NotesModel {
  String title, subtitle;

  NotesModel({required this.title, required this.subtitle});
}


import 'package:ui_3/core/model/notes_model.dart';

List<NotesModel> notesData = [
  NotesModel(title: 'Title 1', subtitle: 'body 1'),
  NotesModel(title: 'Title 2', subtitle: 'body 2'),
  NotesModel(title: 'Title 3', subtitle: 'body 3'),
  NotesModel(title: 'Title 4', subtitle: 'body 4'),
];

# Links

ListTile Widget

TabBar Widget

Navigator Widget

# Questions

Q: What is the vsync: this?

A: vsync stands for "vertical synchronization" and is a concept commonly used in computer graphics and animations. In Flutter, vsync refers to an object that provides a mechanism for synchronizing animations with the device's refresh rate. By synchronizing animations with the refresh rate, you can achieve smoother and more visually appealing animations.

Q: What is the SingleTickerProviderMixin?

A: SingleTickerProviderMixin is a mixin provided by the Flutter framework. It's used to mix in the TickerProvider functionality to a class. The TickerProvider interface provides a ticker that emits a signal whenever a frame is ready to be rendered. This is essential for running animations in Flutter.

.