ChannelWidget is an elegant and easy-to-use package for displaying a list of TV channels and their corresponding shows. Inspired by popular streaming services like Amazon Prime and Jio Tv, this package is fully developed in dart with ❤️ and supports all platforms. With its customizability and layout options, ChannelWidget gives you complete control over the look and feel of your app.
Without Auto Detect Time | With Auto Detect Time |
---|---|
- Displays a list of TV channels and their corresponding shows.
- Fully customizable appearance using ChannelBuilder and ShowBuilder callbacks.
- Option to show the time above the widget.
- Option to move the widget to the current date and time.
- Customizable layout options such as header width, item height, vertical padding, and timer row height.
- Option to disable horizontal scrolling.
Add tv_widget
as a dependency in your pubspec.yaml file
dependencies:
tv_channel_widget: '^0.0.1'
You should then run flutter packages get
in your terminal so as to get the package.
Import Channel Widget :
import 'package:tv_channel_widget/tv_channel_widget.dart';
First, create a list of TvChannel objects and their corresponding ShowItems:
showsList = [
TvChannel
(
channelName: '
Discovery+
'
,
showItems: [
ShowItem
(
showName: '
Gold Rush
'
,
showStartTime: DateTime
(2023, 1, 6, 00, 0),
showEndTime: DateTime
(2023, 1, 6, 1, 0)),
ShowItem
(
showName: '
Food Factory
'
,
showStartTime: DateTime
(2023, 1, 6, 1, 0),
showEndTime: DateTime
(2023, 1, 6, 1, 30)),
ShowItem
(
showName: '
Miso Huge
'
,
showStartTime: DateTime
(2023, 1, 6, 1, 30),
showEndTime: DateTime
(2023, 1, 6, 2, 30)),
ShowItem
(
showName: '
Race of Life
'
,
showStartTime: DateTime
(2023, 1, 6, 2, 30),
showEndTime: DateTime
(2023, 1, 6, 3, 0)),
ShowItem
(
showName: '
Impossible
'
,
showStartTime: DateTime
(2023, 1, 6, 3, 0),
showEndTime: DateTime
(2023, 1, 6, 5, 0)),
ShowItem
(
showName: '
BPL
'
,
showStartTime: DateTime
(2023, 1, 6, 5, 0),
showEndTime: DateTime
(2023, 1, 6, 7, 0)),
ShowItem
(
showName: '
Contact
'
,
showStartTime: DateTime
(2023, 1, 6, 7, 0),
showEndTime: DateTime
(2023, 1, 6, 9, 0)),
ShowItem
(
showName: '
Gold Rush The Movie
'
,
showStartTime: DateTime
(2023, 1, 6, 9, 0),
showEndTime: DateTime
(2023, 1, 6, 12, 0)),
ShowItem
(
showName: '
Gold Rush The Movie
'
,
showStartTime: DateTime
(2023, 1, 6, 12, 0),
showEndTime: DateTime
(2023, 1, 6, 13, 0)),
ShowItem
(
showName: '
Gold Rush The Movie Two
'
,
showStartTime: DateTime
(2023, 1, 6, 13, 0),
showEndTime: DateTime
(2023, 1, 6, 15, 0)),
ShowItem
(
showName: '
Gold Rush The Movie Three
'
,
showStartTime: DateTime
(2023, 1, 6, 15, 0),
showEndTime: DateTime
(2023, 1, 6, 18, 0)),
ShowItem
(
showName: '
Gold Rush The Movie Three
'
,
showStartTime: DateTime
(2023, 1, 6, 18, 0),
showEndTime: DateTime
(2023, 1, 6, 19, 0)),
ShowItem
(
showName: '
Gold Rush The Movie Three
'
,
showStartTime: DateTime
(2023, 1, 6, 19, 0),
showEndTime: DateTime
(2023, 1, 6, 21, 0)),
ShowItem
(
showName: '
Gold Rush The Movie Three
'
,
showStartTime: DateTime
(2023, 1, 6, 21, 0),
showEndTime: DateTime
(2023, 1, 6, 21, 30)),
ShowItem
(
showName: '
Gold Rush Five
'
,
showStartTime: DateTime
(2023, 1, 6, 21, 30),
showEndTime: DateTime
(2023, 1, 6, 23, 59)),
]
)
,
]
Then, use the ChannelWidget to display the list of channels and shows:
ChannelWidget
(
showsList: showsList,channelBuilder: (
channel) {
// Customize the appearance of the channel header
},
showBuilder: (
channel, show) {
// Customize the appearance of the show items
}
)
-
channelBuilder:
- This is a widget builder for Channel you can customzie it how every you want.For channelBuilder widget it will take headerWidth value. -
showsBuilder:
- This is a widget builder forC channel Shows, you can see shows in horizontal view with it's particuler channel.
For further usage refer
the example
available.
Dart attribute | Datatype | Description | Default Value |
---|---|---|---|
channelShows | List<TvChannel> | List of channel with there shows. | (required) |
channelBuilder | Widget | widget to display for each channel item. | (required) |
showsBuilder | Widget | widget to display for each show item. | (required) |
showTime | bool | whether to show the time above the widget. | true |
moveToCurrentTime | bool | determines whether to move the widget to the current date and time. | true |
disableHorizontalScroll | bool | determines the scroll behavior for horizontal scrolling. | false |
headerWidth | double | determines whether to move the widget to the current date and time. | 150 |
itemHeight | double | determines height of channel and shows item. | 100 |
timerRowHeight | double | determines height of timer. | 10 |
verticalPadding | double | vertical padding to channel and shows item | 20 |
For help on editing package code, view the flutter documentation.
If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on GitHub and I'll look into it. Pull request are also welcome.
Jigar Fumakiya - Linkedin | Github
If you found this package helpful, give it a 👍 on pub.dev and a ⭐ on GitHub Your support is greatly appreciated! 🙏🎉 🙏
ChannelWidget is licensed under MIT license
.