So you asked me to take your Orders page from the web app and make it work on mobile. The original had this big data table which... yeah, that's not gonna work on a phone.
Instead of trying to cram that table onto a tiny screen, I basically redesigned the whole thing:
Tables → Cards: Each order now gets its own card. Way easier to read when you're holding a phone.
Added a stock ticker: Figured a trading app should probably show stock prices somewhere, so I put a scrolling ticker at the top.
Made everything actually tappable: The original had tiny buttons. These ones you can actually hit with your thumb.
- Each order is now a card with all the important info laid out clearly
- You can filter by tapping those chip things (like the RELIANCE/ASIANPAINT filters you had)
- Added some loading animations because... why not, it makes it feel faster
- Status badges are color coded - green for executed, orange for pending
- For partial fills, there's a little progress bar
Built it in Flutter because:
- I can ship to both iOS and Android with one codebase
- The animations are really smooth
- It's what I'm comfortable with
Kept the state management simple with just setState() - didn't need anything fancy like Bloc for this.
Used Material Design 3 but tweaked the colors to match trading conventions (green = good, red = bad).
lib/
├── main.dart # App setup
├── models.dart # Data models
├── widgets.dart # UI components
└── dashboard_screen.dart # Main screen
flutter pub get
flutter runThe biggest thing was figuring out how to fit all that table data into cards without making them huge. I ended up prioritizing the most important stuff (ticker, buy/sell, quantity) and tucking the rest into secondary positions.
Also had to make sure the buttons were big enough to actually tap. Nothing worse than trying to hit a tiny button on mobile.
- You see fewer orders at once compared to the table view, but each one is way more readable
- There's more scrolling, but the information is organized better for mobile
- Had to simplify some of the actions to save space
If I had more time I'd probably:
- Hook it up to real data instead of this mock stuff
- Add some charts or price history
- Maybe dark mode since traders love that
- Better tablet support
Right now it's just using fake data to show how the UI works. In the real version it would obviously connect to your actual trading APIs.
The main goal was showing how you can redesign for mobile instead of just making things smaller. Every piece got rethought for phone screens while keeping all the functionality.