TL;DR: This blog walks you through building a responsive, real-time Stock Chart app in Flutter using Syncfusion® widgets. It covers key UI components like watchlists, chart types, indicators, and trendlines, making it a perfect starting point for fintech apps and trading dashboards
Are you building a stock market app or financial dashboard in Flutter? The Flutter Stock Chart Sample from Syncfusion® is a powerful, responsive solution designed to help you visualize real-time stock data with ease. Whether you’re a fintech developer, product manager, or data enthusiast, this sample demonstrates how to create interactive, customizable stock charts using Syncfusion’s Flutter widgets.
In this blog, we’ll walk you through the core UI components and layout of the Stock Chart Sample, covering everything from personalized watchlists to advanced charting tools like indicators, trendlines, and time range selectors. By the end, you’ll see how this sample can serve as a foundation for building scalable, production-ready trading applications.
Note: This application uses stock data purely for demonstration purposes, covering the period from January 01, 2023, to January 01, 2025. Please note, this information does not represent actual market values or investment performance.
Our Stock Chart sample provides, friction-free experience for tracking and analyzing market trends. Featuring a fully responsive design and advanced data visualization tools, it caters to investors and enthusiasts.
- Easy data visualization with appealing UI
- Responsive Stock Chart sample
Let’s take a closer look at each of these key features below.
Easy data visualization with appealing UI
In the Stock Chart sample, we used several Syncfusion ® Flutter widgets listed below to visualize the data easily and attractively.
- Syncfusion ® Flutter Charts
- Syncfusion ® Flutter Range Selector
- Syncfusion ® Flutter Date Range Picker
Responsive Stock Chart sample
Our Stock Chart sample delivers a fully responsive experience optimized for all device types. The layout dynamically adapts to screen sizes while maintaining smooth interactions and intuitive navigation across desktops and mobile devices. Below are detailed specifications for desktop and mobile layouts.
Desktop layout
Features a two-panel design for efficient stock monitoring:
- Stock List: Left-side panel displaying all available stocks.
-
Stock Chart: Right-side panel showcasing detailed technical visualizations and interpretations of selected stocks.
Desktop layout Stock Chart sample
Mobile layout
Prioritizes chart focus while maintaining accessibility:
- Stock List: Slide-up bottom sheet for quick stock selection/switching.
-
Stock Chart: Full-screen visualization displayed by default at initial load.
Mobile layout Stock Chart sample
In this blog, we will explore the user interface of the Stock Chart sample step by step, focusing on the layout. The functionality-related logic will be discussed in an upcoming blog.
Architecture of Stock Chart sample
The Stock Chat sample delivers a natural engagement experience across desktop and mobile platforms. This adaptability ensures users can access essential features and data visualization tools on any device.
Stock List
The Stock List is a user-friendly area for managing and viewing stocks. It uses Flutter’s TabBar for navigation, allowing users to effortlessly switch between sections like All Stock and Watchlist. This design streamlines access to stock management features and enhances the user experience.
- All Stock
- Watchlist
/// Builds the tab bar for switching between all stocks and watchlist.
Widget _buildTabBar() {
final ThemeData themeData = Theme.of(context);
return Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: SizedBox(
height: 40.0,
child: TabBar(
controller: _tabController,
tabs: const [Tab(text: 'All Stock'), Tab(text: 'Watchlist')],
padding: EdgeInsets.zero,
labelPadding: EdgeInsets.zero,
dividerHeight: 1.0,
dividerColor: themeData.colorScheme.outlineVariant,
. . .
. . .
),
),
);
}
All Stock
The All Stock section is designed to provide a comprehensive overview of available stock list. Initially, it serves as the main hub for users to explore and monitor stock performances. When clicking a stock, the respective chart view will change accordingly. Currently, Apple stocks will be displayed by default.
- Search option: Helps users filter or search for stocks.
- Available stock list: Lists all the available stocks, with Apple selected by default
Search feature in Flutter Stock Chart
Search Option
The search field is implemented using the StockAutoComplete widget, which handles the AutoComplete widget commonly, offering real-time stock name suggestions to enhance the search experience.
/// Builds the search field for finding stocks.
Widget _buildSearchField() {
return Padding(
padding: const EdgeInsets.only(bottom: 10.0, left: 12.0, right: 12.0),
child: StockAutoComplete(
defaultStocks: widget.defaultStocks,
onSelected: _handleOptionSelected,
themeData: Theme.of(context),
),
);
}
Available Stock List
Stocks are presented in a scrollable list view, managed by TabBarView. This setup simplifies and efficiently monitors stock, providing a versatile tool for effective investment tracking.
/// Builds the stock list view with tabs.
Widget _buildStockListView() {
return Expanded(
child: TabBarView(
controller: _tabController,
children: [
_StockList(
searchQuery: '',
defaultStocks: widget.defaultStocks,
scrollController: widget.scrollController,
),
. . .
. . .
],
),
);
}
Watchlist
The Watchlist feature is designed to help users manage and monitor specific stocks of interest. It allows investors to create personalized collections of securities they want to track regularly without having to search through the entire market.
- Header
- Search option
- Stock List
Watchlist feature in Flutter Stock Chart
Header
Consists of a watchlist dropdown menu for selecting different saved watchlists, an Add stock button to include new securities, and an edit option to add/delete stocks from the watchlist.
/// Builds the watchlist controls section if on watchlist tab.
Widget _buildWatchlistControls() {
return Column(
children: [
Padding(
padding: const EdgeInsets.only(left: 12.0, right: 12.0, bottom: 8.0),
child: StockWatchList(defaultStocks: widget.defaultStocks),
),
. . .
. . .
],
);
}
Watchlist selection dropdown
The watchlist dropdown is implemented using the StockWatchList widget, without disrupting workflow, and the ability to select or create new watchlists for personalized stock tracking. When users click Add Watchlist, a modal dialog appears allowing them to name their new watchlist (e.g., Watchlist 2 ) and immediately search for stocks to add to it. This streamlined process enables quick watchlist creation and customization with intuitive Cancel and Create options to complete the action.
Widget _buildNewWatchlistButton(
BuildContext context,
Watchlist? selectedWatchlist,
) {
final ThemeData themeData = Theme.of(context);
final ColorScheme colorScheme = themeData.colorScheme;
return Row(
mainAxisSize: MainAxisSize.min,
spacing: 10,
children: [
Icon(Icons.add, color: colorScheme.onSurface),
Text(
'Add Watchlist',
style: themeData.textTheme.bodyLarge?.copyWith(
color: colorScheme.onSurface,
),
),
],
);
}
Add Stock
The + Add stock button is implemented with a TextButton widget. This button allows users to easily add stocks to their watchlist, offering enhanced customization options for managing investment portfolios. When clicked, it opens a modal dialog that prompts users to search for specific stocks and select which watchlist to add them to. Users can either choose an existing watchlist via checkbox selection or create a new watchlist directly from this interface. The dialog provides Cancel and Add options to finalize or abandon the action.
/// Builds the add stock button.
Widget _buildAddStockButton(
BuildContext context,
StockChartProvider provider,
) {
return SizedBox(
width: width,
child: TextButton(
. . .
. . .
child: const Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.add),
Flexible(child: Text('Add stock', overflow: TextOverflow.ellipsis)),
],
),
onPressed: () => _handleAddStockPressed(context, provider),
),
);
}
Watch Edit Option
The edit button, represented by three vertical dots, utilizes a PopupMenuButton. This feature enables users to access options for modifying existing watchlists, making it easy to update and refine their stock interests through a dialog pop-up. When clicked, it displays a dropdown menu with an Edit Watchlist option that opens a modal dialog. This dialog allows users to rename their watchlist and add additional stocks through a search interface. The modal provides Cancel and Edit buttons to either abandon changes or save the modifications to the watchlist.
/// Builds the more options popup menu.
Widget _buildMoreVertPopup(
BuildContext context,
Watchlist? selectedWatchlist,
List<Watchlist> watchlists,
) {
return SizedBox.square(
dimension: 32.0,
child: PopupMenuButton<String>(
tooltip: '',
position: PopupMenuPosition.under,
color: Theme.of(context).colorScheme.surface,
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
icon: const Icon(
IconData(0xe716, fontFamily: stockFontIconFamily),
size: 16.0,
),
onSelected: (String value) => _handleMoreVertOptionSelected(
context,
selectedWatchlist,
value,
),
itemBuilder: (BuildContext context) => _buildMoreVertPopupMenuItem(watchlists),
),
);
}
Search option
As previously mentioned, we have reused the StockAutoComplete widget in the Watchlist tab. So this search function helps users find and select stocks to add to their personal collection.
Available Stock List
Continuing from our earlier discussion, we have reused the TabBarView for the watchlist’s stock display. By default, no stocks will be available in a new watchlist. Once stocks are added, they will appear in the same organized format as the main listing, providing consistency in the investment tracking experience.
Stock Chart
The Stock Chart is a user interface for representing stock performance over time using various chart types to convey price fluctuations. It includes primary and secondary header sections as well as chart UI components. This setup allows users to customize their analysis, making it an essential tool for tracking market trends and informing investment decisions.
Primary header
The primary header in the stock chart interface is designed for intuitive navigation and convenient access to key features. It includes a stock navigation dropdown from an expandable view.
- Star Button
- Disclaimer Button
Primary header feature in Flutter Stock Chart
Star Button
A star button is provided for adding stocks, enhancing the user’s ability to track preferred stocks easily. When clicked, it triggers a streamlined Add Stock in Watchlist dialog that allows users to quickly select which watchlist to add the current stock to via a simple checkbox interface. This one-click favorite mechanism eliminates the need to search for the stock separately, providing an efficient way to build watchlists directly from the stock viewing interface. Users can either confirm with the Add button or dismiss with Cancel to complete their action.
Widget _stockHeader(
BuildContext context,
ThemeData themeData,
StockData stock,
) {
final StockChartProvider provider = context.read<StockChartProvider>();
return provider.isFullScreen
? _buildNavigationHeader(context, themeData, stock)
: _buildStockHeader(themeData, stock);
}
Disclaimer button
Additionally, a disclaimer button offers quick access to a notification that explains our stock data is for demonstration purposes only, covering a specific date range, and does not represent actual market performance.
Widget _stockSubHeader(ThemeData themeData, StockData stock) {
final Data data = stock.data.last;
final bool isStockValueIncreased = !data.percentageChange.isNegative;
return Text.rich(
TextSpan(
children: [
TextSpan(
text: '\${data.currentPrice} ',
style: themeData.textTheme.labelMedium?.copyWith(
color: themeData.colorScheme.onSurface,
fontWeight: fontWeight500(),
),
),
TextSpan(
text:
' ${isStockValueIncreased ? '+' : ''}${data.priceChange} (${data.percentageChange}%)',
style: themeData.textTheme.labelMedium?.copyWith(
color: isStockValueIncreased
? const Color.fromRGBO(59, 163, 26, 1)
: themeData.colorScheme.error,
),
),
],
),
);
}
Secondary header
The secondary header in the stock chart provides advanced tools for data analysis, designed to enhance user experience and analytical capabilities. It offers intuitive access to key features that facilitate comprehensive stock performance tracking. The header adapts responsively between platforms, with the mobile view condensing trendlines, indicators, and chart options into space-efficient icons, while the desktop view presents these same tools as labeled dropdown menus for more explicit navigation.
Time frame dropdown
The time frame dropdown includes options like 1M, 3M, and Custom, where selecting Custom opens a SfDateRangePicker for tailored data analysis. This allows users to examine specific periods that are meaningful to their investment strategies.
Widget _buildDateRangeIntervalDropdown(
BuildContext context,
List<DateRange> dateRangeIntervals,
) {
return Selector(
selector: (BuildContext context, StockChartProvider provider) {
return provider.selectedDateRange;
},
builder:
(BuildContext context, DateRange selectedDateRange, Widget? child) =>
StockDropdown<DateRange>(
hintText: 'Day Range',
selectedType: context.read<StockChartProvider>().selectedDateRange,
items: dateRangeIntervals,
onChanged: (DateRange? selectedDateRange) {
if (selectedDateRange != null) {
context.read<StockChartProvider>().selectedDateRange =
selectedDateRange;
_updateDateRange(context, selectedDateRange);
}
},
iconData: Icons.date_range,
),
);
}
Indicators dropdown
The Indicators dropdown provides customization options for in-depth market analysis. Users can select from a comprehensive range of technical indicators, including Accumulation Distribution, Average True Range, Bollinger Bands, Exponential Moving Average, Moving Average Convergence Divergence, Momentum, Rate of Change, Relative Strength Index, Simple Moving Average, Stochastic, Triangular Moving Average, and Weighted Moving Average. These indicators help users identify patterns, market trends, and potential entry or exit points by applying statistical calculations to price and volume data. The dropdown interface allows for quick application of these analytical tools to enhance the stock chart’s utility for making informed investment decisions.
@override
Widget build(BuildContext context) {
. . .
. . .
return StockDropdown<Enum>(
hintText: 'Indicator',
items: indicatorTypes,
onChanged: (Enum? selectedIndicatorType) {
if (selectedIndicatorType is OverlayIndicatorType) {
provider.addIndicator(selectedIndicatorType);
provider.addOverlayIndicatorHandler(provider.overlayIndicators.last);
} else if (selectedIndicatorType is UnderlayIndicatorType) {
provider.addIndicator(selectedIndicatorType);
provider.addUnderlayIndicatorHandler(
provider.underlayIndicators.last,
);
}
},
iconData: const IconData(0xe73b, fontFamily: stockFontIconFamily),
);
}
Trendline dropdown
The Trendline dropdown offers various mathematical models for visualizing price direction and predicting potential future movements. Users can select from different trendline types, including Linear, Exponential, Power, Logarithmic, Polynomial, and MovingAverage. Each trendline type applies a different mathematical formula to fit the stock’s price action, allowing traders to identify support and resistance levels, confirm existing trends, or anticipate potential trend reversals. These visualization tools help users make more informed decisions by providing statistical projections based on historical price data, giving insight into possible future price movements according to different mathematical models.
@override
Widget build(BuildContext context) {
const List<TrendlineType> trendlineTypes = TrendlineType.values;
return StockDropdown<TrendlineType>(
hintText: 'Trendline',
items: trendlineTypes,
onChanged: (TrendlineType? newValue) {
if (newValue != null) {
final StockChartProvider provider = context.read<StockChartProvider>();
provider.trendlineType = newValue;
provider.addTrendline(newValue);
provider.addTrendlineHandler(provider.stockTrendlines.last);
provider.isTrendlineTypeChanged = !provider.isTrendlineTypeChanged;
}
},
iconData: const IconData(0xe73c, fontFamily: stockFontIconFamily),
);
}
Chart series dropdown
The Chart Series dropdown provides users with multiple visualization methods for stock price data, each offering unique insights into market behavior.
Options include Area, Candle, Hollow Candle, Column, Line, HiLo, OHLC, Range Column, Step Area, and Step Line. These chart types display price information with varying emphasis on open, high, low, and close values, allowing users to identify patterns more suited to their analysis style. Traditional options like Candle charts show price movement with color-coded bodies to indicate bullish or bearish activity, while alternatives like Line charts focus on closing prices for trend visibility. This customization empowers users to view the same stock data through different visual representations, enhancing their ability to make informed investment decisions based on their preferred technical analysis approach.
@override
Widget build(BuildContext context) {
return Selector<StockChartProvider, SeriesType>(
selector: (BuildContext context, StockChartProvider provider) =>
provider.selectedSeriesType,
builder: (
BuildContext context,
SeriesType selectedSeriesType,
Widget? child,
) {
const List<SeriesType> seriesTypes = SeriesType.values;
return StockDropdown<SeriesType>(
selectedType: selectedSeriesType,
hintText: 'Series',
items: seriesTypes,
onChanged: (SeriesType? selectedSeriesType) {
if (selectedSeriesType != null) {
context.read<StockChartProvider>()
..selectedSeriesType = selectedSeriesType
..isFilteringRange(false);
}
},
iconData: const IconData(0xe73a, fontFamily: stockFontIconFamily),
);
},
);
}
Settings & maximize options
The Settings icon button provides access to a comprehensive chart customization dialog that allows users to fine-tune their analysis experience. When clicked, it opens a modal with multiple configuration categories:
- Chart interactions: Includes options like Enable Tooltip to control information display when hovering over data points.
- Chart axis type: Offers selection between Numeric Axis (linear scale) and Log Axis (logarithmic scale) to accommodate different data visualization needs, especially useful for stocks with significant price volatility.
- Chart axis positioning: Contains options like Opposed Axis and Inverted Axis to modify the orientation and placement of chart coordinates.
- Chart range control: Features the Enable Range Selector option, which, when activated, adds a navigation panel that provides an expandable overview of the entire chart data. This allows users to select specific time periods for detailed analysis while maintaining the context of the broader timeline.
The Maximize button, positioned adjacent to the chart controls, enables a full-screen view of the stock chart, eliminating distractions and providing an immersive analysis environment with expanded visual real estate. This feature is particularly valuable for detailed technical analysis that benefits from larger chart patterns and formations being more clearly visible.
@override
Widget build(BuildContext context) {
return IconButton(
iconSize: 20,
icon: Icon(
const IconData(0xe70d, fontFamily: stockFontIconFamily),
size: 20,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
onPressed: () => _showChartSettingsDialog(context),
tooltip: 'Chart Settings',
);
}
Chart View
In the initial stage, the chart UI displays a default blank grid layout, providing a foundational structure for visualizing stock data. This basic setup allows users to initiate further configurations, setting the groundwork for detailed data visualization and analysis.
@override
Widget build(BuildContext context) {
. . .
. . .
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const SizedBox(height: 16.0),
Expanded(
child: SfCartesianChart(
key: widget.key,
margin: EdgeInsets.zero,
plotAreaBorderWidth: 0.5,
primaryXAxis: buildPrimaryXAxis(
context,
widget.showXAxis,
viewModel.customDateRange,
viewModel.isFiltering,
),
primaryYAxis: buildYAxis(context, viewModel.chartSettings),
),
),
],
);
}
Once series data is provided, the chart becomes dynamic, showcasing stock trends and price movements. The data points, such as candlesticks or lines, populate the grid, illustrating the stock’s historical performance and making patterns and trends easily discernible.
@override
Widget build(BuildContext context) {
. . .
. . .
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const SizedBox(height: 16.0),
Expanded(
child: SfCartesianChart(
. . .
. . .
series: [_buildCartesianSeries(viewModel)],
),
),
],
);
}
CartesianSeries<Data, DateTime> _buildCartesianSeries(
StockChartViewModel viewModel,
) {
switch (viewModel.selectedSeriesType) {
case SeriesType.area:
return _buildAreaSeries(viewModel);
case SeriesType.candle:
return _buildCandleSeries(viewModel);
. . .
. . .
}
}
Conclusion
Thanks for reading! In this blog, we’ve explored how the Stock Chart sample streamlines investment strategies with features like intuitive stock filtering, personalized watchlists, and dynamic charting tools. By offering real-time data and customizable insights, it empowers investors to make informed decisions. Additionally, it serves as a robust template for developing scalable trading applications, catering to both novice and experienced users.
Existing customers can download the new version of Essential Studio® on the license and download page. If you are not a Syncfusion® customer, try our 30-day free trial to check out our incredible features.
If you have any questions, contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!
Related Blogs
- Create a Flutter Stock Chart with Charts Widget [Webinar Recording]
- Get Started with JavaScript Stock Chart
- Create stock charts using Syncfusion Angular charts
- Top 5 React Stock Chart Libraries for 2025
This article was originally published at Syncfusion.com.
Top comments (0)