自定义小部件GridView

时间:2019-12-28 08:03:12

标签: flutter dart

enter image description here我正在尝试执行“自定义小部件”教程,正如您所见,当我调用自定义小部件myGridItems(gridName, gridImage, color1, color2)时,带下划线的参数不知道我做了什么。我想念。

import 'package:flutter/material.dart';
import 'package:carousel_pro/carousel_pro.dart';
import 'package:flutter/services.dart';



void main() => runApp(new MyApp());



class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
    ]);

    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Carousel',
      home: ImageCarousel(),
    );
  }
}

class ImageCarousel extends StatefulWidget {
  _ImageCarouselState createState() => new _ImageCarouselState();
}

class _ImageCarouselState extends State<ImageCarousel> with SingleTickerProviderStateMixin {










  Animation<double> animation;
  AnimationController controller;

  initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = new Tween(begin: 0.0, end: 18.0).animate(controller)
      ..addListener(() {
        setState(() {
          // the state that has changed here is the animation object’s value
        });
      });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;

    Widget carousel = new Carousel(
      boxFit: BoxFit.cover,
      images: [
        new AssetImage('assets/s1.jpg'),
        new AssetImage('assets/s2.jpg'),
      ],
      animationCurve: Curves.fastOutSlowIn,
      animationDuration: Duration(seconds: 1),
    );

    Widget banner = new Padding(
      padding: const EdgeInsets.only(top: 20.0, left: 20.0),
      child: new Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15.0),
              bottomRight: Radius.circular(15.0)),
          color: Colors.amber.withOpacity(0.5),
        ),
        padding: const EdgeInsets.all(10.0),
        child: new Text(
          'Enter to learn, leave to achieve',
          style: TextStyle(
            fontFamily: 'fira',
            fontSize: animation.value, //18.0,
            //color: Colors.white,
          ),
        ),
      ),
      // ),
      //  ),
    );




    Widget myGridItems (String gridName, String gridImage, int color1, int color2){
      return Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(24.0),
            gradient: new LinearGradient(
              colors: [
                Color(color1),
                Color(color2),
              ],
              begin: Alignment.centerLeft,
              end:  new Alignment(1.0, 1.0),
            )
        ),
        child: Stack(
          children: <Widget>[
            Opacity(
              opacity: 0.3,
              child: Container(
                decoration: new BoxDecoration(
                    borderRadius: BorderRadius.circular(24.0),
                    image: DecorationImage(
                        image: AssetImage('assets/s1.jpg'),
                        fit: BoxFit.fill)
                ),
              ),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(child: Text("Job", style: TextStyle(color: Colors.white, fontSize: 16),)),
                    SizedBox(width: 10.0),
                    Container(child: Icon(Icons.school, color: Colors.white)),
                    SizedBox(width: 10.0),
                    Container(child: Text("Guide", style: TextStyle(color: Colors.white, fontSize: 16),)),
                  ],
                ),
                ),
                SizedBox(height: 10.0),
                Padding(
                  padding: const EdgeInsets.only(left: 16.0),
                  child: Text(gridName, style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),),
                ),
              ],
            )
          ],
        ),
      );
    }






    return new Scaffold(
      appBar: AppBar(
        title: Text('Kelden Bilingual Higher Institute of Professional Studies\n'
                    'Accord N° 18-1020/L/MINSUP/SG/DDES/SD-ESUP/SDA/LMN du 03/12/2018\n'
                    'Arrêté N° 078/MINEFOP/SG/DFOP/SDGSF/SACD du 13/03/2017', textAlign: TextAlign.center, style: TextStyle(fontSize: 9.5,),),
      ),
      backgroundColor: Colors.blue[200],
      body: new Column(
        children: <Widget>[
      new Container(
      padding: const EdgeInsets.fromLTRB(0, 1, 0, 90.0),
      height: screenHeight / 2,
      child: new ClipRRect(
        borderRadius: BorderRadius.circular(0.0),
        child: new Stack(
          children: [
            carousel,
            banner,
          ],
        ),
      ),
    ),

          Flexible(
            child: GridView.count(
                crossAxisCount: 2,
              padding: EdgeInsets.all(16.0),
              childAspectRatio: 0.9,
              crossAxisSpacing: 10.0,
              mainAxisSpacing: 10.0,
              children: <Widget>[
                  myGridItems(gridName, gridImage, color1, color2)
              ],
            ),
          )

        ],
      ),



    );
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }
}

0 个答案:

没有答案