Saturday, August 1, 2020

Flutter Card

.............................................................................................................................................................................................................................................
Example: #1[ Creating a card]


import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: MyApp(),));

class MyApp extends StatefulWidget{
  @override  MyAppState createState()=>MyAppState();
}
class MyAppState extends State<MyApp>{
  @override  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(),
      body: Container(
    child: Column(
    mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        createCard(),
      ],
    ),
    ),
    );
  }
}
Widget createCard (){
  return Card(
    child: Column(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.album, size: 50.0,),
          title: Text('How to create a Card.'),
          subtitle: Text('Done'),
        )
      ],
    ),
  );
}



.............................................................................................................................................................................................................................................
Example: #2 [Card]
import 'package:flutter/material.dart';

void main()=>runApp(MaterialApp(home: MyApp(),));

class MyApp extends StatefulWidget{
  @override  MyAppState createState()=>MyAppState();
}
class MyAppState extends State<MyApp>{
  @override  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        width: 300,
        //height: 200,    child: Column(
    mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        createCard(),
      ],
    ),
    ),
    );
  }
}
Widget createCard (){
  return Card(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
    elevation: 10,
    color: Colors.pink,
    child: Column(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.album, size: 70.0,),
          title: Text('How to create a Card.', style: TextStyle(color: Colors.white)),
          subtitle: Text('Done', style: TextStyle(color: Colors.white)),
        ),
        ButtonTheme.bar(
          child: ButtonBar(
            children: <Widget>[
              FlatButton(
                child: const Text('Edit', style: TextStyle(color: Colors.white)),
                onPressed: () {},
              ),
              FlatButton(
                child: const Text('Delete', style: TextStyle(color: Colors.white)),
                onPressed: () {},
              ),

            ],
          ),

        ),
      ],
    ),
  );
}

.............................................................................................................................................................................................................................................
Example: #3[Basic card creation]
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: Dashboard(),));

class Dashboard extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
      body: Container(
        padding: EdgeInsets.fromLTRB(10,10,10,0),
        height: 220,
        width: double.maxFinite,
        child: Card(
          elevation: 5,
        ),
      ),
    );
  }
}

.............................................................................................................................................................................................................................................
Example: #4


.............................................................................................................................................................................................................................................
Example: #5

.............................................................................................................................................................................................................................................
Example: #6

.............................................................................................................................................................................................................................................
Example: #7
.............................................................................................................................................................................................................................................
Example: #8

No comments:

Post a Comment