Animal Conserve In Flutter

Animal Conserve In Flutter :

Screenshot :

humingbird.png

animal_card.dart

import 'package:animal_conserv_by_sinaamiriyam/detail_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class AnimalCard extends StatelessWidget {
  final String heroTag;

  const AnimalCard({Key key, this.heroTag}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 375, height: 812)..init(context);

    return Center(
      child: GestureDetector(
        onTap: (){
          Navigator.push(
            context,
            CupertinoPageRoute(builder: (context) => DetailPage(
              heroTag: heroTag,
            )),
          );
        },
        child: Container(
            height: ScreenUtil.instance.setHeight(210),
            width: ScreenUtil.instance.setWidth(327),
            margin: EdgeInsets.only(
                bottom: ScreenUtil.instance.setHeight(20)
            ),
            decoration: BoxDecoration(
                color: Color(0xFF9C9288),
                boxShadow: [
                  BoxShadow(
                      color: Colors.black.withOpacity(0.3),
                      offset: Offset(5,5),
                      blurRadius: 7
                  )
                ],
                borderRadius: BorderRadius.all(Radius.circular(20))
            ),
            child: Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.centerLeft,
                  child: Container(
                    height: ScreenUtil.instance.setHeight(210),
                    width: ScreenUtil.instance.setWidth(150),
                    decoration: BoxDecoration(
                      color: Color(0xFF525145),
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                    ),
                    child: Stack(
                      children: <Widget>[
                        ClipRRect(
                          borderRadius: BorderRadius.all(Radius.circular(20)),
                          child: Image.asset(
                            'asset/map/map_1.png',
                            height: ScreenUtil.instance.setHeight(210),
                            width: ScreenUtil.instance.setWidth(150),
                            color: Colors.white.withOpacity(0.05),
                            fit: BoxFit.cover,
                          ),
                        ),
                        Align(
                          alignment: Alignment.bottomLeft,
                          child: Padding(
                            padding: EdgeInsets.only(
                                left: ScreenUtil.instance.setWidth(16),
                                right: ScreenUtil.instance.setWidth(16),
                                bottom: ScreenUtil.instance.setHeight(18)
                            ),
                            child: Text(
                              'Trinidad And Tobago',
                              style: TextStyle(
                                  fontSize: ScreenUtil.instance.setSp(16),
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white
                              ),
                            ),
                          ),
                        ),
                        Positioned(
                            left: ScreenUtil.instance.setWidth(80),
                            top: ScreenUtil.instance.setWidth(80),
                            child: Container(
                              height: ScreenUtil.instance.setWidth(40),
                              width: ScreenUtil.instance.setWidth(40),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  color: Colors.white.withOpacity(0.1),
                                  shape: BoxShape.circle,
                                  border: Border.all(
                                      color: Color(0xFFFDCD00),
                                      width: 0.2
                                  )
                              ),
                              child: Container(
                                height: ScreenUtil.instance.setWidth(5),
                                width: ScreenUtil.instance.setWidth(5),
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                  color: Color(0xFFFDCD00),
                                  shape: BoxShape.circle,
                                ),
                              ),
                            )
                        )
                      ],
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.bottomRight,
                  child: Container(
                    height: ScreenUtil.instance.setHeight(50),
                    width: ScreenUtil.instance.setWidth(70),
                    decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.2),
                        borderRadius: BorderRadius.only(
                            bottomRight: Radius.circular(20),
                            topLeft: Radius.circular(20)
                        )
                    ),
                    alignment: Alignment.center,
                    child: Icon(
                      Icons.arrow_forward_ios,
                      size: ScreenUtil.instance.setWidth(14),
                      color: Colors.white,
                    ),
                  ),
                ),
                Positioned(
                  top: 0,
                  right: 0,
                  width: ScreenUtil.instance.setWidth(220),
                  child: Hero(
                    tag: heroTag,
                    child: Image.asset(
                      'asset/animal/humingbird.png',
                      fit: BoxFit.cover,
                    ),
                  ),
                )
              ],
            )
        ),
      ),
    );
  }
}

detail_page.dart

import 'package:animal_conserv_by_sinaamiriyam/FadeAnimation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class DetailPage extends StatefulWidget {
  final String heroTag;

  const DetailPage({Key key, this.heroTag}) : super(key: key);

  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 375, height: 812)..init(context);
    double paddingLeft = ScreenUtil.instance.setWidth(24);
    int widhtRightSide = 130;
    int widhtLefttSide = 375 - widhtRightSide;

    return Material(
      child: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color(0xff4A423F),
                  Color(0xff9D8B8B),
                ],
              ),
            ),
          ),
          FadeAnimation(
            fadeDirection: FadeDirection.left,
            delay: 1,
            child: Align(
              alignment: Alignment.centerRight,
              child: Container(
                width: ScreenUtil.instance.setWidth(widhtRightSide),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.horizontal(
                    left: Radius.circular(30)
                  ),
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Color(0xFF3D3730),
                      Color(0xFF837576),
                    ],
                  ),
                ),
                child: SafeArea(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Container(
                        margin: EdgeInsets.only(
                          top: ScreenUtil.instance.setHeight(29)
                        ),
                        height: ScreenUtil.instance.setHeight(31),
                        width: ScreenUtil.instance.setWidth(70),
                        padding: EdgeInsets.symmetric(
                            horizontal: ScreenUtil.instance.setWidth(20)
                        ),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            color: Colors.white.withOpacity(0.1),
                            borderRadius: BorderRadius.all(Radius.circular(25))
                        ),
                        child: Text(
                          'Skip',
                          textAlign: TextAlign.start,
                          style: TextStyle(
                            fontSize: ScreenUtil.instance.setSp(12),
                            color: Colors.white,
                          ),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(
                          bottom: ScreenUtil.instance.setHeight(29)
                        ),
                        height: ScreenUtil.instance.setHeight(60),
                        width: ScreenUtil.instance.setWidth(70),
                        padding: EdgeInsets.symmetric(
                            horizontal: ScreenUtil.instance.setWidth(20)
                        ),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            color: Color(0xFFFDCD00),
                            borderRadius: BorderRadius.all(Radius.circular(15))
                        ),
                        child: Icon(
                          Icons.arrow_forward,
                          color: Colors.white,
                          size: ScreenUtil.instance.setWidth(20),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
          SafeArea(
              child: Container(
                width: ScreenUtil.instance.setWidth(widhtLefttSide),
                padding: EdgeInsets.symmetric(
                  horizontal: paddingLeft
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.only(
                          top: ScreenUtil.instance.setHeight(29)
                      ),
                      width: ScreenUtil.instance.setWidth(50),
                      height: ScreenUtil.instance.setHeight(31),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Container(
                            width: ScreenUtil.instance.setWidth(25),
                            height: ScreenUtil.instance.setHeight(5),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.all(Radius.circular(10))
                            ),
                          ),
                          Container(
                            width: ScreenUtil.instance.setHeight(5),
                            height: ScreenUtil.instance.setHeight(5),
                            decoration: BoxDecoration(
                                color: Colors.white.withOpacity(0.5),
                                borderRadius: BorderRadius.all(Radius.circular(10))
                            ),
                          ),
                          Container(
                            width: ScreenUtil.instance.setHeight(5),
                            height: ScreenUtil.instance.setHeight(5),
                            decoration: BoxDecoration(
                                color: Colors.white.withOpacity(0.5),
                                borderRadius: BorderRadius.all(Radius.circular(10))
                            ),
                          )
                        ],
                      ),
                    ),
                    Expanded(child: Container(),),

                    FadeAnimation(
                      fadeDirection: FadeDirection.top,
                      delay: 1.6,
                      child: Row(
                        children: <Widget>[
                          Container(
                            width: ScreenUtil.instance.setWidth(5),
                            height: ScreenUtil.instance.setWidth(5),
                            decoration: BoxDecoration(
                                color: Color(0xFFFDCD00),
                                shape: BoxShape.circle
                            ),
                          ),
                          SizedBox(
                            width: ScreenUtil.instance.setWidth(5),
                          ),
                          Text(
                            'Hummingbird',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: ScreenUtil.instance.setSp(20),
                                fontWeight: FontWeight.w700
                            ),
                          )
                        ],
                      ),
                    ),

                    FadeAnimation(
                      fadeDirection: FadeDirection.top,
                      delay: 1.4,
                      child: Container(
                        padding: EdgeInsets.symmetric(
                          vertical: paddingLeft
                        ),
                        child: Text(
                          'Hummingbirds are birds native to the Americas and '
                              'constitute the biological family Trochilidae. '
                              'They are the smallest of birds, most species '
                              'measuring 7.5–13 cm (3–5 in) in length. The '
                              'smallest extant bird species is the 5 cm '
                              '(2.0 in) bee hummingbird, which weighs less '
                              'than 2.0 g (0.07 oz). They are known as '
                              'hummingbirds because of the humming sound '
                              'created by their beating wings, which flap at'
                              ' high frequencies audible to humans. They hover '
                              'in mid-air at rapid wing-flapping rates, which '
                              'vary from around 12 beats per second in the '
                              'largest species, to in excess of 80 in some of '
                              'the smallest. Of those species that have been '
                              'measured in wind tunnels, their top speeds '
                              'exceed 15 m/s (54 km/h; 34 mph) and some '
                              'species can dive at speeds in excess of 22'
                              ' m/s (79 km/h; 49 mph).',
                          style: TextStyle(
                            fontSize: ScreenUtil.instance.setSp(13),
                            color: Colors.white,
                          ),
                          maxLines: 10,
                          overflow: TextOverflow.ellipsis,
                          softWrap: true,
                        )
                      ),
                    ),

                    FadeAnimation(
                      fadeDirection: FadeDirection.top,
                      delay: 1.2,
                      child: Container(
                        margin: EdgeInsets.only(
                          bottom: ScreenUtil.instance.setHeight(29),
                        ),
                        height: ScreenUtil.instance.setHeight(60),
                        padding: EdgeInsets.symmetric(
                            horizontal: ScreenUtil.instance.setWidth(20)
                        ),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            color: Colors.white.withOpacity(0.2),
                            borderRadius: BorderRadius.all(Radius.circular(15))
                        ),
                        child: Text(
                          'Donate',
                          textAlign: TextAlign.start,
                          style: TextStyle(
                            fontSize: ScreenUtil.instance.setSp(12),
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              )),
          Positioned(
            bottom: ScreenUtil.instance.setHeight(-120),
            right: ScreenUtil.instance.setWidth(-200),
            height: ScreenUtil.instance.setHeight(812),
            child: Hero(
              tag: widget.heroTag,
              child: Image.asset(
                'asset/animal/humingbird.png',
                fit: BoxFit.cover,
              ),
            ),
          )
        ],
      ),
    );
  }
}

FadeAnimation.dart

import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';

class FadeAnimation extends StatelessWidget {
  final double delay;
  final Widget child;
  final FadeDirection fadeDirection;

  const FadeAnimation({Key key, this.delay, this.child, this.fadeDirection}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final tween = MultiTrackTween([
      Track("opacity").add(Duration(milliseconds: 500), Tween(begin: 0.0, end: 1.0)),
      Track("translate").add(
          Duration(milliseconds: 500), Tween(begin: -30.0, end: 0.0),
          curve: Curves.easeOut)
    ]);

    return ControlledAnimation(
      delay: Duration(milliseconds: (500 * delay).round()),
      duration: tween.duration,
      tween: tween,
      child: child,
      builderWithChild: (context, child, animation) => Opacity(
        opacity: animation["opacity"],
        child: Transform.translate(
            offset: Offset(
                (fadeDirection==FadeDirection.top||fadeDirection==FadeDirection.bottom)
                    ?0
                    :animation["translate"]*(fadeDirection==FadeDirection.left?-1:1),
                (fadeDirection==FadeDirection.left||fadeDirection==FadeDirection.right)
                    ?0
                    :animation["translate"]*(fadeDirection==FadeDirection.top?-1:1),
            ),
            child: child
        ),
      ),
    );
  }
}

enum FadeDirection{
  top,
  bottom,
  right,
  left
}

home.dart

import 'package:animal_conserv_by_sinaamiriyam/FadeAnimation.dart';
import 'package:animal_conserv_by_sinaamiriyam/animal_card.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int activeClassIndex;
  IconData activeMenuIcon;
  int itemCount;
  List<String> listCategory = [
    "All",
    "Birds",
    "Fishes",
    "Reptile"
  ];
  
  List<IconData> listIcon = [
    Icons.work,
    Icons.apps,
    Icons.home
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    activeClassIndex = 0;
    activeMenuIcon = Icons.home;
    itemCount = listCategory[activeClassIndex].length;
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 375, height: 812)..init(context);
    double paddingLeft = ScreenUtil.instance.setWidth(24);

    return Material(
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xff504944),
              Color(0xffA28E8F),
            ],
          ),
        ),
        child: SafeArea(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: ListView(
                    physics: BouncingScrollPhysics(),
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.symmetric(
                          horizontal: paddingLeft,
                          vertical: ScreenUtil.instance.setHeight(29),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Icon(
                              Icons.subject,
                              size: ScreenUtil.instance.setHeight(35),
                              color: Colors.white,
                            ),
                            Icon(
                              Icons.search,
                              size: ScreenUtil.instance.setHeight(35),
                              color: Colors.white,
                            ),
                          ],
                        ),
                      ),
                      FadeAnimation(
                        fadeDirection: FadeDirection.right,
                        delay: 1,
                        child: Padding(
                          padding: EdgeInsets.symmetric(
                            horizontal: paddingLeft,
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                'Discover',
                                textAlign: TextAlign.start,
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: ScreenUtil.instance.setSp(28),
                                    fontWeight: FontWeight.bold
                                ),
                              ),
                              SizedBox(
                                height: ScreenUtil.instance.setHeight(6),
                              ),
                              Text(
                                'Protect our earth together.',
                                textAlign: TextAlign.start,
                                style: TextStyle(
                                  fontSize: ScreenUtil.instance.setSp(15),
                                  color: Colors.white.withOpacity(0.4),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      FadeAnimation(
                        fadeDirection: FadeDirection.right,
                        delay: 1.5,
                        child: Container(
                          height: ScreenUtil.instance.setHeight(108),
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: listCategory.length,
                            itemBuilder: (context, index){
                              return Center(
                                child: GestureDetector(
                                  onTap: (){
                                    setState(() {
                                      activeClassIndex=index;
                                      itemCount = listCategory[activeClassIndex].length;
                                    });
                                  },
                                  child: AnimatedContainer(
                                    duration: Duration(milliseconds: 500),
                                    margin: EdgeInsets.only(
                                        left: index==0?paddingLeft:0
                                    ),
                                    height: ScreenUtil.instance.setHeight(31),
                                    padding: EdgeInsets.symmetric(
                                        horizontal: ScreenUtil.instance.setWidth(20)
                                    ),
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        color: index==activeClassIndex?Color(0xFFFDCD00):Colors.transparent,
                                        borderRadius: BorderRadius.all(Radius.circular(25))
                                    ),
                                    child: Text(
                                      listCategory[index],
                                      textAlign: TextAlign.start,
                                      style: TextStyle(
                                        fontSize: ScreenUtil.instance.setSp(15),
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                                ),
                              );
                            },
                          ),
                        ),
                      ),
                      ListView.builder(
                        itemCount: 5,
                        physics: ClampingScrollPhysics(),
                        shrinkWrap: true,
                        itemBuilder: (context,index){
                          String heroTag = "humingbird"+index.toString();
                          return FadeAnimation(
                            fadeDirection: FadeDirection.right,
                            delay: 2+index/5,
                            child: AnimalCard(
                              heroTag: heroTag,
                            ),
                          );
                        },
                      )

                    ],
                  )
                ),
                Container(
                  height: ScreenUtil.instance.setHeight(70),
                  width: ScreenUtil.instance.setWidth(375),
                  padding: EdgeInsets.symmetric(
                    horizontal: paddingLeft
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: listIcon.map((icon) =>
                        GestureDetector(
                          onTap: (){
                            setState(() {
                              activeMenuIcon = icon;
                            });
                          },
                          child: Container(
                            width: ScreenUtil.instance.setWidth(42),
                            height: ScreenUtil.instance.setWidth(42),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(10)),
                              color: activeMenuIcon==icon?Color(0xFFB9AEAE):Colors.transparent,
                              boxShadow: [
                                BoxShadow(
                                    color: activeMenuIcon==icon?Colors.black.withOpacity(0.1):Colors.transparent,
                                    offset: Offset(5,5),
                                    blurRadius: 5
                                )
                              ],
                            ),
                            child: Icon(
                              icon,
                              color: Colors.white,
                              size: ScreenUtil.instance.setWidth(20),
                            ),
                          ),
                        )
                    ).toList(),
                  ),
                )
              ],
        )),
      ),
    );
  }
}

main.dart

import 'package:animal_conserv_by_sinaamiriyam/home.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.grey,
      ),
      home: Home(),
    );
  }
}

pubspec.yaml

name: animal_conserv_by_sinaamiriyam
description: Animal Conservation
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  flutter_screenutil: ^0.6.1
  simple_animations: ^1.3.4

dev_dependencies:
  flutter_test:
    sdk: flutter


flutter:
  uses-material-design: true

  assets:
   - asset/map/map_1.png
   - asset/map/map_2.png
   - asset/animal/humingbird.png

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in