فلاتر برای وب — راهنمای مقدماتی

1name: flutter_web_example
2description: A basic example app demonstrating Flutter for Web
3author: Kenneth Reilly <kenneth@innovationgroup.tech>
4version: 1.0.0
5
6environment:
7  sdk: '>=2.1.0 <3.0.0'
8
9dependencies:
10  flutter_web: any
11  flutter_web_ui: any
12
13dev_dependencies:
14  build_runner: ^1.1.2
15  build_web_compilers: ^1.0.0
16  pedantic: ^1.0.0
17
18dependency_overrides:
19  flutter_web:
20    git:
21      url: https://github.com/flutter/flutter_web
22      path: packages/flutter_web
23  flutter_web_ui:
24    git:
25      url: https://github.com/flutter/flutter_web
26      path: packages/flutter_web_ui

1import 'package:flutter_web/material.dart';
2import 'home.dart';
3
4class FlutterWebDemo extends StatelessWidget {
5
6  @override
7  Widget build(BuildContext context) {
8
9    return MaterialApp(
10      title: 'Flutter Web Demo',
11      theme: ThemeData(primarySwatch: Colors.deepPurple),
12      home: HomePage(title: 'Flutter Web Demo'),
13    );
14  }
15}

1import 'package:flutter_web/material.dart';
2import 'package:flutter_web_example/background.dart';
3import 'section-def.dart';
4import 'section.dart';
5
6class HomePage extends StatefulWidget {
7  
8  HomePage({ Key key, this.title }) : super(key: key);
9  final String title;
10
11  _HomePageState createState() => _HomePageState();
12}
13
14class _HomePageState extends State<HomePage> {
15
16  List<Section> get _cards =>
17    List.generate(sections.length, (int x) 
18      => Section(listenable: _controller, index: x, total: sections.length, item: sections[x]));
19
20  ScrollController _controller = ScrollController();
21
22  @override
23  Widget build(BuildContext context) {
24
25    return Scaffold(
26
27      backgroundColor: Colors.black,
28      body: Stack(
29
30        children: <Widget>[
31
32          Background(
33            image: AssetImage('images/image-01.jpg'),
34            listenable: _controller
35          ),
36          Container(
37            child: ListView(
38              padding: EdgeInsets.only(top: 16, bottom: 64),
39              children: _cards,
40              controller: _controller
41            )
42          )
43        ]
44      )
45    );
46  }    
47}

1import 'package:flutter_web/material.dart';
2
3class Background extends AnimatedWidget {
4
5  Background({ Key key, @required this.image, @required this.listenable }) 
6    : super(key: key, listenable: listenable);
7
8  final AssetImage image;
9  final ScrollController listenable;
10  
11  @override
12  Widget build(BuildContext context) {
13
14    double offset = listenable.hasClients ? listenable.offset : 0;
15    ScrollPosition position = listenable.hasClients ? listenable.position : null;
16    double extent = (position == null) ? 1 : position.maxScrollExtent * 1.2;
17    double align = (offset / extent);
18
19    return Container(
20      constraints: BoxConstraints.expand(),
21      child: Image(
22        image: image,
23        alignment: Alignment(0, align),
24        fit: BoxFit.cover
25      )
26    );
27  }
28}

1import 'package:flutter_web/material.dart';
2
3class SectionDef {
4
5  final String name;
6  final String description;
7  final AssetImage image;
8  const SectionDef(this.name, this.description, this.image);
9}
10
11List<SectionDef> sections = [
12  const SectionDef('Meditation', "Find your inner peace with meditation", AssetImage('images/image-02.jpg')),
13  const SectionDef('Beverages', "Relax with a beverage by the pool", AssetImage('images/image-03.jpg')),
14  const SectionDef('Aromatherapy', "Enjoy the aroma of pure essential oils", AssetImage('images/image-04.jpg')),
15  const SectionDef('Tea Time', "Have a conversation with friends over tea", AssetImage('images/image-05.jpg')),
16  const SectionDef('The Works', "Treat yourself to an all-day session", AssetImage('images/image-06.jpg'))
17];

1import 'package:flutter_web/material.dart';
2import 'section-def.dart';
3
4class Content extends AnimatedWidget {
5    
6  const Content({ Key key, this.listenable, this.children, this.opacity }) 
7    : super(key: key, listenable: listenable);
8
9  final ScrollController listenable;
10  final List<Widget> children;
11  final double opacity;
12
13  @override
14  Widget build(BuildContext context) {
15
16    return Opacity(
17      opacity: opacity,
18      child: Container(
19
20        padding: EdgeInsets.all(48).copyWith(bottom: 0 ),
21        constraints: BoxConstraints.expand(height: 720),
22        child: ClipRRect(
23
24          borderRadius: BorderRadius.all(Radius.circular(12)),
25          child: Container(
26
27            color: Color.fromARGB(64, 0, 16, 32),
28            child: Row(
29
30              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
31              crossAxisAlignment: CrossAxisAlignment.center,
32              children: children
33            )
34          )
35        )
36      )
37    );
38  }
39}
40
41class Section extends AnimatedWidget {
42
43  const Section({ Key key, this.index, this.total, this.item, @required this.listenable })
44    : super(key: key, listenable: listenable);
45
46  final int index;
47  final int total;
48  final SectionDef item;
49  final ScrollController listenable;
50
51  @override
52  Widget build(BuildContext context) {
53
54    Shadow shadow = const Shadow(color: Colors.grey, blurRadius: 24, offset: Offset(12, 12));
55    TextTheme theme = Theme.of(context).textTheme;
56    TextStyle _titleStyle = theme.display3.copyWith( color: Colors.black45, shadows: [shadow]);
57    TextStyle _descStyle = theme.display1.copyWith(fontSize: 18, color: Colors.black54, shadows: [shadow]);
58    
59    double offset = listenable.hasClients ? listenable.offset : 0;
60    ScrollPosition position = listenable.hasClients ? listenable.position : null;
61    double extent = (position == null || position.maxScrollExtent == null) ? 1 : position.maxScrollExtent;
62    double diff = 1 - (index - ((offset / extent) * (total - 1))).abs();
63    double opacity = diff.clamp(0.2, 1);
64
65    return Content(
66      listenable: listenable,
67      opacity: opacity,
68      children: <Widget>[
69
70        Container(
71          constraints: BoxConstraints.expand(width: 400),
72          child: Column(
73            
74            mainAxisAlignment: MainAxisAlignment.center,
75            crossAxisAlignment: CrossAxisAlignment.center,
76            children: <Widget>[
77              Text(item.name, style: _titleStyle),
78              Text(item.description, style: _descStyle)
79            ]
80          ),
81        ),
82        Container(
83          child: ClipRRect(
84            
85            borderRadius: BorderRadius.all(Radius.circular(12)),
86            child: Container(
87
88              constraints: BoxConstraints.expand(width: 440, height: 440),
89              child: Image(image: item.image, fit: BoxFit.fitWidth),
90            )
91          ),
92        )
93      ]
94    );  
95  }
96}