cupertino_notification_bar_ui

Description:

cupertino notification bar ui

cupertino_notification_bar_ui #
Hi, welcome here!
Myself Delwin, a passionate FlutterFire Developer.
Introduction #
This is a package made for Flutter on Android, iOS, Windows and Linux.
UI design for dismissible Containers similar to that of iOS Notification Center. Inspired by a question on StackOverflow.

Features #
You can organize UI components in a stacked manner. These are only dismissible and can trigger a Function on clicked.
StackedListItem is a built in StatelessWidget which can be coupled with StackedList to show components. Alternatively you can use Containers for the same.

Getting started #
Depend on it #
Add package to pubspec.yaml file
dependencies:
cupertino_notification_bar_ui: ^1.0.101
copied to clipboard
Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Or alternatively run
flutter pub add cupertino_notification_bar_ui
copied to clipboard
Import it #
Now in your Dart code, you can use:
import 'package:cupertino_notification_bar_ui/cupertino_notification_bar_ui.dart';
copied to clipboard
Usage #
The package takes in a list of children, either of StackedListItem or Container as its parameter.
Use the below given example to set up
import 'package:flutter/material.dart';
import 'package:cupertino_notification_bar_ui/cupertino_notification_bar_ui.dart';

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

class MyApp extends StatelessWidget {
const MyApp({super.key});

// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

// define `StackItems` here.
// afternatively you can use Containers with height to 75px
final stackItems = [
StackedListItem(
leading: const CircleAvatar(
backgroundImage: NetworkImage(
"https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_960_720.jpg")),
title: "Hi",
subtitle: const Text("It's nice to see you here"),
trailing: const Icon(Icons.link_rounded),
),
StackedListItem(
leading: const CircleAvatar(
backgroundImage: NetworkImage(
"https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_960_720.jpg")),
title: "This happens to be my first open-source",
subtitle: const Text("We all start somewhere, right?"),
trailing: const Icon(Icons.link_rounded),
),
StackedListItem(
leading: const CircleAvatar(
backgroundImage: NetworkImage(
"https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_960_720.jpg")),
title: "Thanks for checking this out!",
subtitle: const Text("Happy coding :)"),
trailing: const Icon(Icons.link_rounded),
)
];

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.deepOrange.shade200,
appBar: AppBar(
title: Text(widget.title),
),
body: StackedList(children: stackItems));
}
}

copied to clipboard
Additional information #
Check => official GitHub repo.
This package was made just with the intention of providing a structured solution. I do not practice open source regularly, hence I will not be managing this package actively.
Feel free to raise a issue in repository for this package on GitHub, I'd love to tailor this package as per my availability, or we could work together on this.
If you really liked this package, even though I do not actively want to be sponsored, you can donate here.