Flip Card in Flutter || Amazevalley

Flip Card is a component that provides you flip animation on the card it's used to hide and show the details of the card or you can say that displaying multi info at same place.



Explore at Flip Card




import 'package:flutter/material.dart';
import 'package:flip_card/flip_card.dart';
void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(), debugShowCheckedModeBanner: false, );
} }

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState(); }
class _MyHomePageState extends State {
@override Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( title: Text('Flip Card In Flutter Demo'), ),
body: ListView(
children: [ Container(
width: MediaQuery.of(context).size.width, height: 200.0, child: FlipCard(
direction: FlipDirection.VERTICAL, // you can choose whatever you want front: Container(
height: 200.0, color: Colors.purple[500], child: Column(
children: [ SizedBox(height: 20.0,), Text('FRONT',style: TextStyle(
fontSize: 30.0, color: Colors.white, fontWeight: FontWeight.bold
),),
SizedBox(height: 20.0,),
Text('This is front side of the card.',style: TextStyle(
fontSize: 20.0, color: Colors.white,
),), ], ), ), back: Container(
height: 200.0, color: Colors.black, child: Column( children: [
SizedBox(height: 20.0,), Text('BACK',style: TextStyle(
fontSize: 30.0, color: Colors.white, fontWeight: FontWeight.bold ),),
SizedBox(height: 20.0,), Text('This is the back side of the card.',style: TextStyle(
fontSize: 20.0, color: Colors.white, ),),
], ), ), ) ), ], ) );
} }



I hope this article give you good information about how to use the flip card in flutter. If you have any query do comment below thanks, Flutter Developers

Comments

Post a Comment

Popular posts from this blog

Multi Image Picker In Flutter || Amazevalley

Image
In this tutorial you will learn how to pick multiple images in flutter using  plugin  multi_image_picker 3.0.14 Using this plugin you can  Pick multiple images Instantly pick thousands of images at once, without any delay or blocking the UI thread. Native performance The plugin takes advantage of the two best image picking libraries for Android and iOS, bringing you the best native platform experience. Photos sorted by albums Take a picture option in the grid view Restrict the maximum count of images the user can pick Customizable UI and localizations Thumbnail support Specify the image quality of the original image or thumbnails Read image meta data DEMO : Have Look on the main.dart ---- import 'package:flutter/material.dart' ; import 'dart:async' ; import 'package:flutter/services.dart' ; import 'package:multi_image_picker/multi_image_picker.dart' ; import 'view.dart' ; void main () => runApp( new MyApp
Read more

Listview sort by name in Flutter || Amazevalley

Image
In this tutorial you will learn how to search a particular item in  listview in flutter, we have create a list with different name of actors, after display the list we will find the particular actor name by search his name, when you start to type a character list  will sort automatically and display the items which contains the character, import 'package:flutter/material.dart' ; import 'package:folding_cell/folding_cell.dart' ; void main () => runApp( new Directory ()) ; class Directory extends StatelessWidget { // This widget is the root of your application. @override Widget build (BuildContext context) { return MaterialApp ( debugShowCheckedModeBanner: false , home: MyHomePage () , ) ; } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState () => _MyHomePageState () ; } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { TextEditingController e
Read more

Image Picker In Flutter || Amazevalley

Image
In this tutorial you will learn how to pick the image from gallery and capture from camera in flutter. You can explore more it on  image_picker  . Let take a look on the code first of all we will write the function for gallery Demo : import 'dart:async' ; import 'dart:io' ; import 'package:flutter/material. dart' ; import 'package:image_picker/image_ picker.dart' ; void main () { runApp( MyApp ()) ; } class MyApp extends StatelessWidget { @override Widget build (BuildContext context) { return MaterialApp ( title: 'Image Picker Demo' , home: MyHomePage (title: 'Image Picker Example' ) , debugShowCheckedModeBanner: false , ) ; } } class MyHomePage extends StatefulWidget { MyHomePage({Key key , this . title }) : super (key: key) ; final String title ; @override _MyHomePageState createState () => _MyHomePageState () ; } class _MyHomePageState extends State<MyHomePage> {
Read more