Flutter iOS/Android应用快速实现带语言选择欢迎界面的方案问询

Absolutely! There’s a straightforward, cross-platform way to build a welcome screen with language selection that works seamlessly on both iOS and Android in Flutter. I’ve used this approach many times for quick implementations—here’s how to do it:

Step 1: Add Required Dependencies #

First, add these packages to your pubspec.yaml—they handle internationalization, user preference storage, and cross-platform UI adapters:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.18.1
  shared_preferences: ^2.2.2

Run flutter pub get to install them.

Step 2: Configure App-Wide Localization #

Update your main.dart to set up localization support, check for saved user preferences, and control app navigation:

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:intl/intl.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Check if the user already selected a language on previous launches
  final prefs = await SharedPreferences.getInstance();
  final savedLocaleCode = prefs.getString('selected_locale');
  runApp(MyApp(initialLocale: savedLocaleCode != null ? Locale(savedLocaleCode) : null));
}

class MyApp extends StatefulWidget {
  final Locale? initialLocale;
  const MyApp({super.key, this.initialLocale});

  // Helper method to update locale from anywhere in the app
  static void setLocale(BuildContext context, Locale newLocale) {
    final _MyAppState? state = context.findAncestorStateOfType<_MyAppState>();
    state?.updateLocale(newLocale);
  }

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Locale? _currentLocale;

  @override
  void initState() {
    super.initState();
    _currentLocale = widget.initialLocale;
  }

  void updateLocale(Locale newLocale) {
    setState(() {
      _currentLocale = newLocale;
    });
    // Save the selected language to persist across app restarts
    SharedPreferences.getInstance().then((prefs) {
      prefs.setString('selected_locale', newLocale.languageCode);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Language Select Demo',
      locale: _currentLocale,
      // Add any languages you want to support here
      supportedLocales: const [
        Locale('en'),
        Locale('zh'),
        Locale('es'),
      ],
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      // Show welcome screen only if no language is saved; else go to home
      home: _currentLocale == null ? const LanguageWelcomeScreen() : const HomeScreen(),
    );
  }
}

Step 3: Build the Language Selection Welcome Screen #

Create a simple, user-friendly welcome screen that lets users pick their language. This UI will automatically adapt to iOS and Android styles thanks to Flutter’s Material/Cupertino widgets:

class LanguageWelcomeScreen extends StatelessWidget {
  const LanguageWelcomeScreen({super.key});

  // List of languages to display—add more as needed
  final List<Map<String, dynamic>> availableLanguages = const [
    {'code': 'en', 'displayName': 'English'},
    {'code': 'zh', 'displayName': '中文'},
    {'code': 'es', 'displayName': 'Español'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Welcome!',
                style: Theme.of(context).textTheme.headlineLarge?.copyWith(
                      fontWeight: FontWeight.bold,
                    ),
              ),
              const SizedBox(height: 32),
              const Text(
                'Please select your preferred language:',
                style: TextStyle(fontSize: 16),
              ),
              const SizedBox(height: 24),
              // Use a ListView for scrollable language options
              ListView.builder(
                shrinkWrap: true,
                itemCount: availableLanguages.length,
                itemBuilder: (context, index) {
                  final language = availableLanguages[index];
                  return Card(
                    margin: const EdgeInsets.symmetric(vertical: 8.0),
                    child: ListTile(
                      title: Text(language['displayName']),
                      onTap: () {
                        // Update locale and navigate to home
                        MyApp.setLocale(context, Locale(language['code']));
                      },
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// Example home screen to show after language selection
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: Text(
          Intl.message('Hello, welcome to the app!'),
          style: const TextStyle(fontSize: 18),
        ),
      ),
    );
  }
}

Step 4: Quick Cross-Platform Adaptation Tips #

• If you want to match iOS’s native look more closely, replace Scaffold with CupertinoPageScaffold and Card with CupertinoButton in the welcome screen.
• For languages with regional variants (like zh-CN vs zh-TW), modify the Locale to include the country code: Locale('zh', 'CN') and update the supportedLocales list accordingly.
• To add localized strings beyond the basics, create .arb files for each language and use the intl package to generate localization classes—this scales better for larger apps.

内容的提问来源于stack exchange，提问作者Wytex System