Getting Started with Flutter

What is Flutter?

Flutter is an open-source UI software development toolkit developed by Google for building cross-platform applications. It allows developers to use a single codebase to build applications that run on multiple platforms, including iOS, Android, Web, and desktop.

Flutter Demo

🎯

同一套代码，完美运行在 Android 平台

🏠

⚙️

👤

Why Choose Flutter?

Cross-Platform Development
- Single codebase for multiple platforms
- Native performance experience
- Saves development time and cost
Hot Reload
- Real-time preview of modifications
- Faster development and debugging
- Enhanced development experience
Rich Component Library
- Material Design and Cupertino style components
- Highly flexible custom components
- Rich third-party package ecosystem
Excellent Performance
- Compiles directly to native code
- Smooth 60fps rendering
- Excellent memory performance

Learning Path

Dart Language Basics
- Variables and data types
- Functions and classes
- Asynchronous programming
Flutter Basics
- Widget concepts
- Layout system
- State management
UI Development
- Material Design
- Cupertino style
- Custom components
Data Processing
- Network requests
- Local storage
- Advanced state management
Advanced Topics
- Performance optimization
- Native integration
- App deployment

App Deployment

Deploying a Flutter app to app stores is an important step in the development process. Here are the main steps and considerations:

1. Pre-deployment Preparation

App Signing

# Generate keystore
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

# Configure signing information
# Add to android/key.properties:
storePassword=<password>
keyPassword=<password>
keyAlias=key
storeFile=<keystore path>

Version Configuration

# pubspec.yaml
version: 1.0.0+1  # version number + build number

Resource Optimization
- Compress image resources
- Remove debug code
- Optimize dependency package size

2. Building the App

Android Build

# Generate APK
flutter build apk --release

# Generate App Bundle
flutter build appbundle --release

iOS Build

# Generate archive file
flutter build ios --release

# Open project in Xcode
cd ios
xed .

3. Publishing to App Stores

Google Play Store
- Create developer account
- Fill in app information
- Upload App Bundle
- Configure store listing
Apple App Store
- Register Apple Developer account
- Create app ID
- Submit app through App Store Connect
- Wait for review

4. Release Checklist

Functionality Testing
- Core functionality integrity
- Interface adaptation check
- Performance testing
Compliance Check
- Privacy policy
- App permissions explanation
- Third-party library licenses
Release Materials
- App icon
- Screenshots and previews
- App description
- Update log

Summary

Flutter is a powerful cross-platform development framework. Through this tutorial, we have learned:

Basic Knowledge
- How Flutter works
- Dart language basics
- Widget and layout system
Advanced Features
- State management
- Route navigation
- Network requests
- Data persistence
Advanced Topics
- Performance optimization
- Native integration
- App deployment

Through learning and practicing these concepts, you now have the ability to develop complete Flutter applications. We recommend continuing to follow Flutter official documentation and community updates, participating in open-source projects, and continuously improving your skills through practice. Remember, programming learning is an ongoing process - maintain your curiosity and enthusiasm, and you’ll go far in your Flutter development journey.

Good luck with your Flutter development journey!

In Flutter, route navigation is the core mechanism for transitioning between application pages. Flutter provides a powerful navigation system that allows us to easily manage different pages of the application.

Named Routes

// Define routes in MaterialApp
MaterialApp(
  routes: {
    '/': (context) => HomePage(),
    '/detail': (context) => DetailPage(),
  },
)

// Use named route navigation
Navigator.pushNamed(context, '/detail');

Dynamic Routes

// Navigate directly to new page
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailPage()),
);

Route Parameters

Passing Parameters through Constructor

// Define page with parameters
class DetailPage extends StatelessWidget {
  final String title;
  DetailPage({required this.title});

  // ...
}

// Pass parameters
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailPage(title: 'Details'),
  ),
);

Named Route Parameters

// Pass parameters
Navigator.pushNamed(
  context,
  '/detail',
  arguments: {'title': 'Details'},
);

// Receive parameters
final args = ModalRoute.of(context)!.settings.arguments as Map;

Network Requests and Data Persistence

Network requests and data persistence are essential features in modern applications. Flutter provides multiple ways to handle these requirements.

HTTP Network Requests

Using http package

import 'package:http/http.dart' as http;

// GET request
Future<void> fetchData() async {
  final response = await http.get(
    Uri.parse('https://api.example.com/data'),
  );
  if (response.statusCode == 200) {
    // Handle response data
    print(response.body);
  }
}

// POST request
Future<void> postData() async {
  final response = await http.post(
    Uri.parse('https://api.example.com/create'),
    body: {'name': 'Flutter', 'type': 'framework'},
  );
  // Handle response
}

Data Persistence

SharedPreferences

import 'package:shared_preferences/shared_preferences.dart';

// Save data
Future<void> saveData() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('username', 'Flutter User');
}

// Read data
Future<String?> loadData() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getString('username');
}

SQLite Database

import 'package:sqflite/sqflite.dart';

// Create database
Future<Database> getDatabase() async {
  return openDatabase(
    'my_db.db',
    version: 1,
    onCreate: (db, version) async {
      await db.execute(
        'CREATE TABLE users(id INTEGER PRIMARY KEY, name TEXT, email TEXT)',
      );
    },
  );
}

// Insert data
Future<void> insertUser(String name, String email) async {
  final db = await getDatabase();
  await db.insert('users', {
    'name': name,
    'email': email,
  });
}

With these basic concepts learned, you can now start building fully functional Flutter applications. We suggest trying to combine these concepts by creating a small project, such as a todo list app or news reader, which will help you better understand and apply these concepts.

Performance Optimization

Performance optimization is key to ensuring a good user experience in Flutter applications. Here are some important optimization techniques:

1. Performance Monitoring

// Using Observatory for performance analysis
void main() {
  // Enable Observatory
  debugPaintSizeEnabled = true;
  runApp(MyApp());
}

// Using Performance Overlay
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      showPerformanceOverlay: true,  // Show performance overlay
      home: MyHomePage(),
    );
  }
}

2. Memory Optimization

Image Optimization

// Use appropriate image caching strategy
Image.network(
  'https://example.com/image.jpg',
  cacheWidth: 300,  // Specify cache size
  cacheHeight: 300,
)

List Optimization

// Use ListView.builder for lazy loading
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

3. Rendering Optimization

const Constructor

// Use const constructor to optimize rebuilds
const MyWidget(
  key: Key('my_widget'),
  child: Text('Hello'),
)

RepaintBoundary

// Isolate frequently repainting widgets
RepaintBoundary(
  child: MyAnimatedWidget(),
)

Native Integration

Flutter provides various ways to interact with native platforms, allowing you to fully utilize platform-specific features.

1. Platform Channels

// Define platform channel
static const platform = MethodChannel('samples.flutter.dev/battery');

// Call native method
Future<void> getBatteryLevel() async {
  try {
    final int result = await platform.invokeMethod('getBatteryLevel');
    print('Battery level: $result%');
  } on PlatformException catch (e) {
    print('Failed to get battery level: ${e.message}');
  }
}

2. Native Plugin Development

Create Plugin

flutter create --org com.example --template=plugin my_plugin

Implement Native Code

Android (Kotlin):

class MyPlugin: FlutterPlugin {
  override fun onMethodCall(call: MethodCall, result: Result) {
    when (call.method) {
      "getPlatformVersion" -> result.success("Android ${android.os.Build.VERSION.RELEASE}")
      else -> result.notImplemented()
    }
  }
}

iOS (Swift):

public class SwiftMyPlugin: NSObject, FlutterPlugin {
  public static func register(with registrar: FlutterPluginRegistrar) {
    let channel = FlutterMethodChannel(name: "my_plugin",
                                      binaryMessenger: registrar.messenger())
    let instance = SwiftMyPlugin()
    registrar.addMethodCallDelegate(instance, channel: channel)
  }
}

3. Platform Views

// Embed native view in Flutter
Widget build(BuildContext context) {
  return AndroidView(
    viewType: 'native-view',
    onPlatformViewCreated: _onPlatformViewCreated,
  );
}

// iOS platform view
Widget build(BuildContext context) {
  return UiKitView(
    viewType: 'native-view',
    onPlatformViewCreated: _onPlatformViewCreated,
  );
}

By mastering these advanced topics, you’ll be able to develop Flutter applications with excellent performance and rich features. Remember that performance optimization is an ongoing process, and you should choose optimization strategies based on your specific application scenarios. Additionally, proper use of native integration capabilities can help your application fully leverage the advantages of each platform.

Getting Started with Flutter

Getting Started with Flutter

What is Flutter?

Why Choose Flutter?

Learning Path

App Deployment

1. Pre-deployment Preparation

2. Building the App

3. Publishing to App Stores

4. Release Checklist

Summary

Route Navigation

Basic Navigation

Route Parameters

Network Requests and Data Persistence

HTTP Network Requests

Data Persistence

Performance Optimization

1. Performance Monitoring

2. Memory Optimization

3. Rendering Optimization

Native Integration

1. Platform Channels

2. Native Plugin Development

3. Platform Views