以下是一些 Flutter 開發的範例:
基本應用程式範例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Flutter App',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello, World!'),
),
),
);
}
}
這是一個簡單的 Flutter 應用程式,它顯示了一個標題為 "Welcome to Flutter" 的應用程式列,並在中央顯示了一個文字 "Hello, World!"。
列表視圖範例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'List View Example',
home: Scaffold(
appBar: AppBar(
title: Text('List View'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
},
),
),
);
}
}
這個範例展示了如何使用 ListView 和 ListTile 來建立一個可滾動的列表視圖,其中包含了 "Item 1"、"Item 2"、"Item 3" 和 "Item 4"。
按鈕和事件處理範例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
int counter = 0;
void incrementCounter() {
counter++;
print('Counter: $counter');
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Button Example',
home: Scaffold(
appBar: AppBar(
title: Text('Button'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Counter: $counter'),
RaisedButton(
onPressed: incrementCounter,
child: Text('Increment'),
),
],
),
),
),
);
}
}
這個範例展示了如何建立一個按鈕和事件處理。每次按下按鈕時,計數器會增加一並顯示在畫面上。
以上範例僅是 Flutter 開發的一小部分示例,您可以根據需要進一步探索 Flutter 框架和功能,並構建更複雜的應用程式。