10分钟自己完成买菜app开发

在这篇文章中，我将向你介绍如何使用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 products = [

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 _items = [];

List get items => _items;

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(context);

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(context);

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并将其扩展到需要的任何规模。