在这篇文章中，我将向你介绍如何使用Flutter框架，在10分钟内开发出一个简单的买菜APP，让用户可以浏览菜品并下单购买。下面是详细步骤：
第一步：环境搭建
首先，我们需要先安装Flutter SDK和Android Studio，然后在Android Studio中安装Flutter插件。这些都可以在Flutter官网得到详细的安装指南。
第二步：创建Flutter项目
在Android Studio中创建一个新Flutter项目，选择你喜欢的项目名称和位置。
第三步：创建界面
我们将使用Flutter的Material Design库创建我们的布局。我们需要在lib文件夹中创建一个名为”pages”的文件夹，创建一个新的名为”home_page.dart”的文件，在其中添加以下代码：
```dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('买菜'),
),
body: Center(
child: Text(
'欢迎使用买菜APP!',
style: TextStyle(fontSize: 24),
),
),
);
}
}
```
这将创建一个带有App Bar和欢迎文本的基本界面。
第四步：添加菜品
我们将在界面上添加一些菜品，用户可以浏览并选择购买。为此，我们需要在lib文件夹下创建一个名为”models”的文件夹，在其中创建一个名为”product.dart”的文件。在其中，我们将定义一个Product类，代码如下：
```dart
class Product {
final String id;
final String title;
final String description;
final double price;
const Product({
required this.id,
required this.title,
required this.description,
required this.price,
});
}
```
接下来在”home_page.dart”文件中，我们需要添加一个包含菜品信息的列表。代码如下：
```dart
import 'package:flutter/material.dart';
import 'package:shopping_app/models/product.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State
final List
Product(
id: '1',
title: '苹果',
description: '优质苹果，产地来自山东',
price: 3.5,
),
Product(
id: '2',
title: '香蕉',
description: '新鲜香蕉，产地来自海南',
price: 2.5,
),
Product(
id: '3',
title: '西红柿',
description: '上等西红柿，产地来自甘肃',
price: 4.0,
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('买菜'),
),
body: ListView.builder(
itemCount: products.length,
itemBuilder: (BuildContext ctxt, int index) {
return ListTile(
title: Text(products[index].title),
subtitle: Text(products[index].description),
trailing: Text('\¥${products[index].price.toStringAsFixed(2)}'),
);
},
),
);
}
}
```
这将创建一个ListView和一个包含菜品信息的列表。
第五步：购物车
接下来，我们将创建一个简单的购物车来存储用户选购的商品。我们将在lib文件夹下创建一个名为”providers”的文件夹，在其中创建一个名为”cart.dart”的文件，代码如下：
```dart
import 'package:flutter/foundation.dart';
import 'package:shopping_app/models/product.dart';
class Cart with ChangeNotifier {
List
List
void addProduct(Product product) {
_items.add(product);
notifyListeners();
}
}
```
这将定义一个Cart类，其中包括一个_addProduct_方法将被用于将商品加入购物车，并通过notifyListeners()通知界面更新。
接下来我们将在界面上添加一个购物车按钮，并将其与购物车页面进行关联。
我们需要在”home_page.dart”文件中添加以下代码：
```dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shopping_app/models/product.dart';
import 'package:shopping_app/providers/cart.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State
...
@override
Widget build(BuildContext context) {
final cart = Provider.of
return Scaffold(
appBar: AppBar(
title: Text('买菜'),
actions:
FlatButton(
child: Row(
children:
Icon(Icons.shopping_cart),
Text('\¥${cart.items.length > 0 ? cart.items.fold(0, (a, b) => a + b.price).toStringAsFixed(2) : "0.00"}'),
],
),
onPressed: () {
Navigator.of(context).pushNamed('/cart');
},
),
],
),
body: ...
);
}
}
```
这将创建一个包含购物车图标和总价格的FlatButton，当用户点击该按钮时会跳转到购物车界面。
第六步：购物车页面
现在，我们将在购物车页面中显示用户选购的商品。我们需要在lib文件夹下创建一个名为”pages”的文件夹，在其中创建一个名为”cart_page.dart”的文件，代码如下：
```dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shopping_app/providers/cart.dart';
class CartPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final cart = Provider.of
return Scaffold(
appBar: AppBar(
title: Text('购物车'),
),
body: ListView.builder(
itemCount: cart.items.length,
itemBuilder: (BuildContext ctxt, int index) {
return ListTile(
title: Text(cart.items[index].title),
subtitle: Text(cart.items[index].description),
trailing: Text('\¥${cart.items[index].price.toStringAsFixed(2)}'),
);
},
),
);
}
}
```
此界面允许用户查看他们已选购的商品。
第七步：路由设置
最后一步是路由设置。我们需要在”main.dart”文件中设置路由，并将我们的两个界面与我们之前创建的页面关联。代码如下：
```dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shopping_app/models/product.dart';
import 'package:shopping_app/providers/cart.dart';
import 'package:shopping_app/pages/cart_page.dart';
import 'package:shopping_app/pages/home_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => Cart()),
],
child: MaterialApp(
title: '买菜',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
initialRoute: '/',
routes: {
'/': (context) => HomePage(),
'/cart': (context) => CartPage(),
},
),
);
}
}
```
这将使我们的应用程序能够在界面之间进行切换。
到此，我们的买菜APP就开发完毕了。使用这个简单的步骤，您可以轻松地创建一个基本的购物APP并将其扩展到需要的任何规模。
