Flutter 給 UIKit 開發者的指南

dart

Text(
  'I like Flutter!',
  style: TextStyle(fontWeight: FontWeight.bold),
);

content_copy

dart

​
class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  const SampleApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}
​
class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});
​
  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}
​
class _SampleAppPageState extends State<SampleAppPage> {
  // Default placeholder text
  String textToShow = 'I Like Flutter';
​
  void _updateText() {
    setState(() {
      // Update the text
      textToShow = 'Flutter is Awesome!';
    });
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: Center(child: Text(textToShow)),
      floatingActionButton: FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: const Icon(Icons.update),
      ),
    );
  }
}

content_copy

dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Sample App')),
    body: Center(
      child: CupertinoButton(
        onPressed: () {},
        padding: const EdgeInsets.only(left: 10, right: 10),
        child: const Text('Hello'),
      ),
    ),
  );
}

content_copy

dart

class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  const SampleApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}
​
class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});
​
  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}
​
class _SampleAppPageState extends State<SampleAppPage> {
  // Default value for toggle.
  bool toggle = true;
​
  void _toggle() {
    setState(() {
      toggle = !toggle;
    });
  }
​
  Widget _getToggleChild() {
    if (toggle) {
      return const Text('Toggle One');
    }
​
    return CupertinoButton(onPressed: () {}, child: const Text('Toggle Two'));
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: Center(child: _getToggleChild()),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggle,
        tooltip: 'Update Text',
        child: const Icon(Icons.update),
      ),
    );
  }
}

content_copy

dart

import 'package:flutter/material.dart';
​
class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  const SampleApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Fade Demo',
      home: MyFadeTest(title: 'Fade Demo'),
    );
  }
}
​
class MyFadeTest extends StatefulWidget {
  const MyFadeTest({super.key, required this.title});
​
  final String title;
​
  @override
  State<MyFadeTest> createState() => _MyFadeTest();
}
​
class _MyFadeTest extends State<MyFadeTest>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late CurvedAnimation curve;
​
  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(milliseconds: 2000),
      vsync: this,
    );
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }
​
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: FadeTransition(
          opacity: curve,
          child: const FlutterLogo(size: 100),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          controller.forward();
        },
        tooltip: 'Fade',
        child: const Icon(Icons.brush),
      ),
    );
  }
}

content_copy

dart

import 'package:flutter/material.dart';
​
void main() => runApp(const MaterialApp(home: DemoApp()));
​
class DemoApp extends StatelessWidget {
  const DemoApp({super.key});
​
  @override
  Widget build(BuildContext context) => const Scaffold(body: Signature());
}
​
class Signature extends StatefulWidget {
  const Signature({super.key});
​
  @override
  State<Signature> createState() => SignatureState();
}
​
class SignatureState extends State<Signature> {
  List<Offset?> _points = <Offset?>[];
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          RenderBox? referenceBox = context.findRenderObject() as RenderBox;
          Offset localPosition = referenceBox.globalToLocal(
            details.globalPosition,
          );
          _points = List.from(_points)..add(localPosition);
        });
      },
      onPanEnd: (details) => _points.add(null),
      child: CustomPaint(
        painter: SignaturePainter(_points),
        size: Size.infinite,
      ),
    );
  }
}
​
class SignaturePainter extends CustomPainter {
  SignaturePainter(this.points);
​
  final List<Offset?> points;
​
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5;
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null) {
        canvas.drawLine(points[i]!, points[i + 1]!, paint);
      }
    }
  }
​
  @override
  bool shouldRepaint(SignaturePainter oldDelegate) =>
      oldDelegate.points != points;
}

content_copy

dart

class CustomButton extends StatelessWidget {
  const CustomButton(this.label, {super.key});
​
  final String label;
​
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: () {}, child: Text(label));
  }
}

content_copy

dart

@override
Widget build(BuildContext context) {
  return const Center(child: CustomButton('Hello'));
}

content_copy

dart

void main() {
  runApp(
    CupertinoApp(
      home: const MyAppHome(), // becomes the route named '/'
      routes: <String, WidgetBuilder>{
        '/a': (context) => const MyPage(title: 'page A'),
        '/b': (context) => const MyPage(title: 'page B'),
        '/c': (context) => const MyPage(title: 'page C'),
      },
    ),
  );
}

content_copy

dart

Navigator.of(context).pushNamed('/b');

content_copy

dart

Object? coordinates = await Navigator.of(context).pushNamed('/location');

content_copy

dart

Navigator.of(context).pop({'lat': 43.821757, 'long': -79.226392});

content_copy

dart

class Strings {
  static const String welcomeMessage = 'Welcome To Flutter';
}

content_copy

dart

Text(Strings.welcomeMessage);

content_copy

dart

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
​
class MyWidget extends StatelessWidget {
  const MyWidget({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      localizationsDelegates: <LocalizationsDelegate<dynamic>>[
        // Add app-specific localization delegate[s] here
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: <Locale>[
        Locale('en', 'US'), // English
        Locale('he', 'IL'), // Hebrew
        // ... other locales the app supports
      ],
    );
  }
}

content_copy

dart

import 'package:flutter/material.dart';
​
void main() {
  runApp(const SampleApp());
}
​
class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
​
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}
​
class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});
​
  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}
​
class _SampleAppPageState extends State<SampleAppPage> {
  List<Widget> _getListData() {
    final List<Widget> widgets = [];
    for (int i = 0; i < 100; i++) {
      widgets.add(
        Padding(padding: const EdgeInsets.all(10), child: Text('Row $i')),
      );
    }
    return widgets;
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: ListView(children: _getListData()),
    );
  }
}

content_copy

dart

import 'dart:developer' as developer;
import 'package:flutter/material.dart';
​
void main() {
  runApp(const SampleApp());
}
​
class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
​
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}
​
class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});
​
  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}
​
class _SampleAppPageState extends State<SampleAppPage> {
  List<Widget> _getListData() {
    List<Widget> widgets = [];
    for (int i = 0; i < 100; i++) {
      widgets.add(
        GestureDetector(
          onTap: () {
            developer.log('row tapped');
          },
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Text('Row $i'),
          ),
        ),
      );
    }
    return widgets;
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: ListView(children: _getListData()),
    );
  }
}

content_copy

dart

import 'dart:developer' as developer;
​
import 'package:flutter/material.dart';
​
void main() {
  runApp(const SampleApp());
}
​
class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
​
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}
​
class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});
​
  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}
​
class _SampleAppPageState extends State<SampleAppPage> {
  List<Widget> widgets = <Widget>[];
​
  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 100; i++) {
      widgets.add(getRow(i));
    }
  }
​
  Widget getRow(int i) {
    return GestureDetector(
      onTap: () {
        setState(() {
          widgets = List.from(widgets);
          widgets.add(getRow(widgets.length));
          developer.log('row $i');
        });
      },
      child: Padding(padding: const EdgeInsets.all(10), child: Text('Row $i')),
    );
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: ListView(children: widgets),
    );
  }
}

content_copy

dart

import 'dart:developer' as developer;
​
import 'package:flutter/material.dart';
​
void main() {
  runApp(const SampleApp());
}
​
class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}
​
class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});
​
  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}
​
class _SampleAppPageState extends State<SampleAppPage> {
  List<Widget> widgets = [];
​
  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 100; i++) {
      widgets.add(getRow(i));
    }
  }
​
  Widget getRow(int i) {
    return GestureDetector(
      onTap: () {
        setState(() {
          widgets.add(getRow(widgets.length));
          developer.log('row $i');
        });
      },
      child: Padding(padding: const EdgeInsets.all(10), child: Text('Row $i')),
    );
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: ListView.builder(
        itemCount: widgets.length,
        itemBuilder: (context, position) {
          return getRow(position);
        },
      ),
    );
  }
}

content_copy

dart

@override
Widget build(BuildContext context) {
  return ListView(
    children: const <Widget>[
      Text('Row One'),
      Text('Row Two'),
      Text('Row Three'),
      Text('Row Four'),
    ],
  );
}

content_copy

dart

@override
Widget build(BuildContext context) {
 return ElevatedButton(
   onPressed: () {
     developer.log('click');
   },
   child: const Text('Button'),
 );
}

content_copy

dart

class SampleTapApp extends StatelessWidget {
 const SampleTapApp({super.key});
​
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Center(
       child: GestureDetector(
         onTap: () {
           developer.log('tap');
         },
         child: const FlutterLogo(size: 200),
       ),
     ),
   );
 }
}

content_copy

dart

class SampleApp extends StatefulWidget {
  const SampleApp({super.key});
​
  @override
  State<SampleApp> createState() => _SampleAppState();
}
​
class _SampleAppState extends State<SampleApp>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late CurvedAnimation curve;
​
  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 2000),
    );
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onDoubleTap: () {
            if (controller.isCompleted) {
              controller.reverse();
            } else {
              controller.forward();
            }
          },
          child: RotationTransition(
            turns: curve,
            child: const FlutterLogo(size: 200),
          ),
        ),
      ),
    );
  }
}

content_copy

dart

import 'package:flutter/material.dart';
​
class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        dividerColor: Colors.grey,
      ),
      home: const SampleAppPage(),
    );
  }
}

content_copy

dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Sample App')),
    body: const Center(
      child: Text(
        'This is a custom font text',
        style: TextStyle(fontFamily: 'MyCustomFont'),
      ),
    ),
  );
}

content_copy

dart

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
​
Future<String> loadAsset() async {
  return await rootBundle.loadString('my-assets/data.json');
}

content_copy

dart

image: AssetImage('images/a_dot_burr.png'),

content_copy

dart

@override
Widget build(BuildContext context) {
  return Image.asset('images/my_image.png');
}

content_copy

dart

class _MyFormState extends State<MyForm> {
  // Create a text controller and use it to retrieve the current value.
  // of the TextField!
  final myController = TextEditingController();
​
  @override
  void dispose() {
    // Clean up the controller when disposing of the Widget.
    myController.dispose();
    super.dispose();
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Retrieve Text Input')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: TextField(controller: myController),
      ),
      floatingActionButton: FloatingActionButton(
        // When the user presses the button, show an alert dialog with the
        // text the user has typed into our text field.
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                // Retrieve the text the user has typed in using our
                // TextEditingController.
                content: Text(myController.text),
              );
            },
          );
        },
        tooltip: 'Show me the value!',
        child: const Icon(Icons.text_fields),
      ),
    );
  }
}

content_copy

dart

Center(
  child: TextField(decoration: InputDecoration(hintText: 'This is a hint')),
)

content_copy

dart

import 'package:flutter/material.dart';
​
void main() {
  runApp(const SampleApp());
}
​
class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}
​
class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});
​
  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}
​
class _SampleAppPageState extends State<SampleAppPage> {
  String? _errorText;
​
  bool isEmail(String em) {
    String emailRegexp =
        r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|'
        r'(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|'
        r'(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
​
    RegExp regExp = RegExp(emailRegexp);
​
    return regExp.hasMatch(em);
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: Center(
        child: TextField(
          onSubmitted: (text) {
            setState(() {
              if (!isEmail(text)) {
                _errorText = 'Error: This is not an email';
              } else {
                _errorText = null;
              }
            });
          },
          decoration: InputDecoration(
            hintText: 'This is a hint',
            errorText: _errorText,
          ),
        ),
      ),
    );
  }
}

content_copy

dart

Future<void> loadData() async {
  final Uri dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  final http.Response response = await http.get(dataURL);
  setState(() {
    data = (jsonDecode(response.body) as List).cast<Map<String, Object?>>();
  });
}

content_copy

dart

import 'dart:convert';
​
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
​
void main() {
  runApp(const SampleApp());
}
​
class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}
​
class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});
​
  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}
​
class _SampleAppPageState extends State<SampleAppPage> {
  List<Map<String, Object?>> data = [];
​
  @override
  void initState() {
    super.initState();
    loadData();
  }
​
  Future<void> loadData() async {
    final Uri dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
    final http.Response response = await http.get(dataURL);
    setState(() {
      data = (jsonDecode(response.body) as List).cast<Map<String, Object?>>();
    });
  }
​
  Widget getRow(int index) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Text('Row ${data[index]['title']}'),
    );
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index) {
          return getRow(index);
        },
      ),
    );
  }
}

content_copy

dart

Future<void> loadData() async {
  final Uri dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  final http.Response response = await http.get(dataURL);
  setState(() {
    data = (jsonDecode(response.body) as List).cast<Map<String, Object?>>();
  });
}

content_copy