How to Create a Stock Comparison App with Flet: Apple vs Tesla

Flet is an exciting Python framework for building real-time, interactive web apps — all in pure Python! In this article, we'll walk through building a line chart app to visualize stock prices for Apple (AAPL) and Tesla (TSLA) over the years.

By the end, you'll understand:

• How to use Flet to build a beautiful UI

• How to display interactive line charts

• How to switch between datasets dynamically

Let’s break it down! 🛠️

---

🧱 Step-by-Step Breakdown of the Code

1. Importing Flet

import flet as ft

We start by importing the flet module, which powers our entire UI.

---

2. Sample Stock Price Data

AAPL_PRICES = [
    (2005, 1.20), (2006, 1.98), ...
]

TSLA_PRICES = [
    (2010, 3.80), (2011, 5.26), ...
]

We define two datasets as lists of (year, price) tuples:

• One for Apple's stock prices

• One for Tesla's stock prices

---

3. Chart Creation Function

def create_chart(data, color):
    return ft.LineChart(
        tooltip_bgcolor=ft.colors.with_opacity(0.8, ft.colors.WHITE),
        ...
    )

This function creates a customizable LineChart using the data and a color parameter:

• min_y and max_y set the Y-axis range (stock prices)

• min_x and max_x set the X-axis (years)

• curved=True gives smooth lines

• below_line_gradient adds a gradient below the curve

• data_points converts the data to points on the chart

---

4. Main UI Function

def main(page: ft.Page):
    page.horizontal_alignment = "center"
    page.vertical_alignment = "center"

This sets up the layout to center everything on the screen.

---

5. Chart Container (Default = Apple)

chart_container = ft.Container(content=create_chart(AAPL_PRICES, ft.colors.BLUE), expand=True)

We create a Container to hold our chart. Initially, it shows Apple stock prices in blue.

---

6. Dataset Switching Logic

def switch_dataset(e):
    dataset = TSLA_PRICES if e.control.data == "tsla" else AAPL_PRICES
    color = ft.colors.RED if e.control.data == "tsla" else ft.colors.BLUE
    chart_container.content = create_chart(dataset, color)
    page.update()

This function is triggered when a button is clicked. It:

• Detects which dataset to use (Tesla or Apple)

• Updates the chart_container with the new data

• Calls page.update() to refresh the UI

---

7. Interactive Buttons

buttons = ft.Row(
    alignment="center",
    controls=[
        ft.ElevatedButton("Apple (AAPL)", on_click=switch_dataset, data="aapl"),
        ft.ElevatedButton("Tesla (TSLA)", on_click=switch_dataset, data="tsla"),
    ],
)

We create two buttons that let users choose between Apple and Tesla. The data field helps us identify which button was clicked.

---

8. Final Layout

page.add(
    ft.Column(
        expand=True,
        ...
        controls=[
            ft.Text("Apple vs Tesla: Stock Price Over the Years", ...),
            buttons,
            ft.Container(content=chart_container, expand=4, padding=20),
        ],
    )
)

We use a Column layout to vertically stack:

• A title

• The buttons

• The chart container

---

9. Launch the App

ft.app(target=main)

This line tells Flet to start the app and run the main function as the entry point.

---

🔁 What Happens When You Run It?

• By default, you see Apple's stock prices.

• Clicking “Tesla (TSLA)” replaces the chart with Tesla's data in red.

• You can switch back and forth instantly!

---

🧠 Wrap-Up: What You Learned

• How to build an interactive line chart using Flet

• How to create reusable chart components

• How to update the UI dynamically with event handlers

• How to build clean, responsive layouts

---

🚀 Try Enhancements!

Here are a few things you could add:

• Allow both datasets to show on one chart

• Add tooltips with formatted dollar values

• Animate transitions when changing datasets

• Show which dataset is active using button styling

---

Want the full script? You're looking at it!

Let me know if you want to turn this into a web app, package it as a desktop app, or add features like data import from CSV or APIs!

Happy coding! 💻📊