小白带你用flutter 使用web页面
1.建立main.dart
import 'package:flutter/material.dart';
import 'home_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(fontFamily: "Futura"),
home: HomePage(),
);
}
}
定义一个MyApp，直接调用home：homePage()
2.建立home_page
import 'package:flutter/material.dart';
// Final App - Subscribe Like & Share
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: [
BackgroundWigdet(width: width),
ShoeWidget(width: width),
NikeGreyLogoWidget(width: width, height: height),
Positioned(
right: width * 0.15,
bottom: height * 0.18,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [InfoCardWidget(), CartButtonWidget()],
),
),
Positioned(
height: kToolbarHeight,
width: width,
child: AppBarWidget(width: width),
),
DividerWidget(width: width),
NikeTextWidget(height: height, width: width),
DescWidget(height: height, width: width)
],
),
);
}
}
class CartButtonWidget extends StatelessWidget {
const CartButtonWidget({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
color: Colors.blue,
hoverColor: Colors.purple,
textColor: Colors.white,
child: Text("加入购物车"),
onPressed: () {},
),
);
}
}
class InfoCardWidget extends StatelessWidget {
const InfoCardWidget({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
clipBehavior: Clip.antiAlias,
elevation: 8.0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
"空气最大值",
style: Theme.of(context).textTheme.display2,
),
Text(
"270",
style: Theme.of(context)
.textTheme
.display1
.copyWith(color: Colors.black),
),
Text(
"\￥199",
style: Theme.of(context)
.textTheme
.display1
.copyWith(color: Colors.red, fontWeight: FontWeight.bold),
)
],
),
SizedBox(width: 20),
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 15,
height: 15,
color: Colors.indigo,
),
SizedBox(
height: 10,
),
Container(
width: 15,
height: 15,
color: Colors.red,
),
SizedBox(
height: 10,
),
Container(
width: 15,
height: 15,
color: Colors.greenAccent,
),
SizedBox(
height: 10,
),
Container(
width: 15,
height: 15,
color: Colors.grey,
),
SizedBox(
height: 10,
),
Container(
width: 15,
height: 15,
color: Colors.black,
)
],
)
],
),
),
);
}
}
class DescWidget extends StatelessWidget {
const DescWidget({
Key key,
@required this.height,
@required this.width,
}) : super(key: key);
final double height;
final double width;
@override
Widget build(BuildContext context) {
return Positioned(
top: height * 0.6,
right: width * 0.35,
child: Container(
width: width * 0.16,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"2020",
style: TextStyle(
color: Colors.white54,
fontFamily: "",
fontSize: 80,
fontWeight: FontWeight.bold,
),
),
Align(
alignment: Alignment.centerLeft,
child: Text(
"空气最大值",
style: TextStyle(
color: Colors.white54,
fontFamily: "",
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
),
Text(
"270",
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.white54,
fontFamily: "",
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
}
}
class NikeTextWidget extends StatelessWidget {
const NikeTextWidget({
Key key,
@required this.height,
@required this.width,
}) : super(key: key);
final double height;
final double width;
@override
Widget build(BuildContext context) {
return Positioned(
top: height * 0.25,
left: width * 0.1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
Text(
"耐克",
style: TextStyle(
color: Colors.white54,
fontSize: 150,
letterSpacing: 10,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,
),
),
Text(
"JUST DO IT",
style: TextStyle(
color: Colors.white54,
fontSize: 100,
letterSpacing: 10,
fontWeight: FontWeight.bold,
),
)
],
),
);
}
}
class DividerWidget extends StatelessWidget {
const DividerWidget({
Key key,
@required this.width,
}) : super(key: key);
final double width;
@override
Widget build(BuildContext context) {
return Positioned(
top: kToolbarHeight,
width: width,
child: Divider(
color: Colors.white,
thickness: 0.5,
),
);
}
}
class AppBarWidget extends StatelessWidget {
const AppBarWidget({
Key key,
@required this.width,
}) : super(key: key);
final double width;
@override
Widget build(BuildContext context) {
return AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: width * 0.3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Image.asset(
"assets/images/nike_logo.png",
width: 80,
color: Colors.white,
),
Text(
"新款",
),
Text(
"男",
),
Text(
"女",
),
Text(
"男孩",
),
Text(
"女孩",
)
],
),
),
Container(
width: width * 0.1,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Icons.search,
color: Colors.black,
),
Icon(
Icons.shopping_cart,
color: Colors.black,
),
Icon(
Icons.menu,
color: Colors.black,
),
],
),
)
],
),
);
}
}
class NikeGreyLogoWidget extends StatelessWidget {
const NikeGreyLogoWidget({
Key key,
@required this.width,
@required this.height,
}) : super(key: key);
final double width;
final double height;
@override
Widget build(BuildContext context) {
return Positioned(
right: width * 0.06,
top: height * 0.18,
child: Image.asset(
"assets/images/nike_logo_grey.png",
height: 200,
),
);
}
}
class ShoeWidget extends StatelessWidget {
const ShoeWidget({
Key key,
@required this.width,
}) : super(key: key);
final double width;
@override
Widget build(BuildContext context) {
return Positioned(
right: width * 0.15,
child: Image.asset(
"assets/images/shoe.png",
fit: BoxFit.cover,
alignment: Alignment.centerLeft,
),
);
}
}
class BackgroundWigdet extends StatelessWidget {
const BackgroundWigdet({
Key key,
@required this.width,
}) : super(key: key);
final double width;
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Stack(
fit: StackFit.expand,
children: [
Image.asset(
"assets/images/background.jpg",
fit: BoxFit.cover,
alignment: Alignment.centerLeft,
),
Container(
color: Color.fromRGBO(0, 105, 233, 0.8),
),
],
),
),
Container(
width: width * 0.3,
color: Colors.white,
)
],
);
}
}
定义home_page.dart
2.1 pubspec.yaml
name: flutter_web_nike
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- assets/images/
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
fonts:
- family: Futura
fonts:
- asset: assets/fonts/Futura-CondensedLight.otf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
3.运行flutter run
运行前先进行pub get 获取依赖