Development Guide
This guide helps you customize the MartFury Flutter app. No advanced Flutter knowledge required!
Understanding the App Structure
Think of the app like a house with different rooms:
lib/
├── core/ # 🏠 Main settings (like your house's electrical panel)
│ └── app_config.dart # App settings (colors, URLs, etc.)
├── main.dart # 🚪 Front door (app starts here)
└── src/
├── controller/ # 🧠 Smart controls (handles app logic)
├── model/ # 📋 Data templates (user info, product info)
├── service/ # 🌐 Internet connections (talks to your website)
├── theme/ # 🎨 Design settings (colors, fonts)
└── view/ # 👀 What users see
├── screen/ # 📱 App pages (login, home, etc.)
└── widget/ # 🧩 Reusable parts (buttons, cards)
Quick Start
Before You Begin
✅ What You Need:
- Flutter installed on your computer
- A code editor (VS Code is easiest)
- The app source code
- 30 minutes of your time
First Steps
- Open Terminal/Command Prompt
- Go to your app folder
- Install dependencies:bash
flutter pub get
- Run the app:bash
flutter run
That's it! Your app should start running.
Common Customizations
🎨 Changing Colors and Fonts
Want different colors?
- Open
lib/src/theme/app_theme.dart
- Find the color you want to change
- Replace with your color code
// Example: Change primary color to red
static const Color primaryColor = Color(0xFFFF0000); // Red color
Want different fonts?
- Open
lib/src/theme/app_fonts.dart
- Change the font name
// Example: Change to Roboto font
const kAppTextStyle = GoogleFonts.roboto;
📝 Adding New Text
To add new text that can be translated:
- Open
assets/translations/en.json
- Add your text:
{
"my_new_text": "Hello World"
}
- Use it in your app:
Text('my_new_text'.tr())
🔗 Adding New API Connections
Need to connect to a new API?
- Add the URL in
lib/core/app_config.dart
:
static const String myNewApiUrl = 'https://api.example.com/data';
- Create a simple service in
lib/src/service/
:
class MyNewService {
static Future<List<dynamic>> getData() async {
// This gets data from your API
final response = await http.get(Uri.parse(AppConfig.myNewApiUrl));
return json.decode(response.body);
}
}
- Use it in your screen:
// In your screen file
FutureBuilder(
future: MyNewService.getData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text('Data loaded!');
}
return CircularProgressIndicator();
},
)
Testing Your Changes
🧪 Simple Testing
Before releasing your app:
Test on different devices:
- Android phone
- iPhone (if possible)
- Different screen sizes
Test basic functions:
- Login/logout
- Browse products
- Add to cart
- Search
Test your changes:
- Did your color changes work?
- Do new texts show correctly?
- Are new features working?
🔧 Quick Fixes
App not starting?
flutter clean
flutter pub get
flutter run
Colors not changing?
- Make sure you saved the file
- Restart the app (hot reload might not work for theme changes)
New text not showing?
- Check spelling in translation files
- Make sure you're using
.tr()
at the end
Building Your App
📱 For Testing
Android:
flutter build apk --debug
iPhone:
flutter build ios --debug
🚀 For App Store Release
Android (Google Play):
flutter build appbundle --release
iPhone (App Store):
flutter build ios --release
Getting Help
📚 Useful Resources
- Flutter Documentation: flutter.dev
- Quick Setup Guides: Check files 01-15 in this documentation
- Social Login Setup: Check files 12-15 for Facebook, Google, Apple, Twitter
🆘 Common Problems
Problem: "Flutter not found"
- Solution: Install Flutter SDK first
Problem: "No devices found"
- Solution: Connect your phone or start an emulator
Problem: "Build failed"
- Solution: Run
flutter clean
thenflutter pub get
Problem: "App crashes"
- Solution: Check the error message in terminal/console
💡 Tips for Success
- Start Small: Make one change at a time
- Test Often: Run the app after each change
- Keep Backups: Use git to save your work
- Ask for Help: Don't hesitate to contact support
Remember: You don't need to be a Flutter expert to customize this app! Start with simple changes like colors and text, then gradually try more advanced features.