使用flutter 写一个简单的购买电影票app

原创

已于 2023-09-08 21:52:48 修改

· 222 阅读

0 ·

版权

文章标签：

#flutter #javascript #开发语言

于 2023-09-08 21:49:26 首次发布

文章目录

概要

这个案例没有使用任何插件,所以写着有点麻烦,

整体架构流程

综合使用flutter中的各种widget

这个页面是通过pageView来实现的,左右滑动切换主页概括,使用堆叠布局给图片加一点遮罩效果,然后当切换的时候获取索引值,然后切换, 数据是模拟动态数据

import 'package:flutter/material.dart';
import 'package:movie/data.dart';
import 'package:movie/widget/start.dart';

import 'details.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
  var _movieData = MovieData().movieList;

  int currentIndex = 0;
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        physics: BouncingScrollPhysics(),
        itemCount: _movieData.length,
          itemBuilder: (context,index){
        return listPageView(index);
      })
    );
  }
  Widget listPageView(int index){
    return Stack(
      children: [
        Container(
          height: double.infinity,
          width: double.infinity,
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage("${_movieData[index].image}"),fit: BoxFit.cover
              )
          ),
        ),
        Container(
          color: Colors.black.withOpacity(0.5),
        ),
        Container(
          height: double.infinity,
          width: double.infinity,
          child: Column(
            children: [
              SizedBox(height: 20),
              Row(
                children: [
                  Expanded(
                      flex: 1,
                      child: Container(
                        margin: EdgeInsets.only(left: 15),
                        height: 50,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            border: Border.all(color: Colors.white.withOpacity(0.5),width: 2)
                        ),
                        child: Icon(Icons.clear_all,color: Colors.white,),
                      )
                  ),
                  Expanded(
                      flex: 6,
                      child: Container(
                        margin: EdgeInsets.symmetric(horizontal: 25),
                        height: 50,
                        decoration: BoxDecoration(
                            border: Border.all(color: Colors.white.withOpacity(0.7),width: 2),
                            borderRadius: BorderRadius.circular(8)
                        ),
                        child: TextField(
                          decoration: InputDecoration(
                              hintText: "Search Movies",
                              contentPadding: EdgeInsets.only(left: 15,top: 15),
                              hintStyle: TextStyle(color: Colors.white),
                              suffixIcon: Icon(Icons.search,color: Colors.white,)
                          ),
                        ),
                      )
                  )
                ],
              ),
              SizedBox(height: 70),
              Image.asset("assets/image/togologo.png",height: 100,width: 150),
              SizedBox(height: 10),
              Text("Drama",style: TextStyle(color: Colors.white)),
              Container(
                height: 20,
                width: 100,
                child: StartWidget(rating: _movieData[index].rating),
              ),
              SizedBox(height: 20),
              GestureDetector(
                onTap: (){
                  Navigator.push(context, MaterialPageRoute(
                    builder: (context){
                      return DetailsScreen(movie: _movieData[index],);
                    }
                  ));
                },
                child: Container(
                  height: 35,
                  width: 80,
                  decoration:BoxDecoration(
                      color: Color(0xffb63831),
                      borderRadius: BorderRadius.circular(12)
                  ),
                  alignment: Alignment.center,
                  child: Text("BUY TICKET",style: TextStyle(fontSize: 12,color: Colors.white,fontWeight: FontWeight.bold),),
                ),
              ),
              SizedBox(height: 10),
              Container(
                height: 260,
                width: 180,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage("${_movieData[index].image}"),fit: BoxFit.cover
                    ),
                    borderRadius: BorderRadius.circular(20)
                ),
              ),
              SizedBox(height: 20),
              Text("${_movieData[index].name}",
                style: TextStyle(fontSize: 20,color: Colors.white,fontWeight: FontWeight.bold),)
            ],
          ),
        )
      ],
    );
  }
}

当写完这个页面时,点击buy ticket按钮进入到详情页出现一个动画, 使用TweenAnimation