Thursday, December 17, 2020

Onboarding UI Screen || Slider

 Onboarding UI Screen

...........................................................................................................................................................................................................................
Example :#1 []

Install Library

https://pub.dev/packages/introduction_screen/install
  introduction_screen: ^1.0.9

Code Here

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

void main() {
  runApp(MyApp());
}

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

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

    return Scaffold(
      body: IntroductionScreen(
        pages: [
          PageViewModel(
            title: 'A reader lives a thousand lives',
            body: 'The man who never reads lives only one',
            image: buildImage('assets/images/dog.jpg'),
            decoration: getDecorations(),
          ),
          PageViewModel(
            title: 'A reader lives a thousand lives',
            body: 'The man who never reads lives only one',
            image: buildImage('assets/images/dog.jpg'),
            decoration: getDecorations(),
          ),
          PageViewModel(
            title: 'A reader lives a thousand lives',
            body: 'The man who never reads lives only one',
            image: buildImage('assets/images/dog.jpg'),
            decoration: getDecorations(),
          ),
        ],
        done: Text('Read'),
        onDone: () {},
        showSkipButton: true,
        skip: Text('Skip'),
        skipFlex: 0,
        nextFlex: 0,
        next: Icon(Icons.arrow_forward),
        dotsDecorator: gotdotsDecorator(),
       // isProgress: false, //bubble disappear
       // isProgressTap: false, // Bubble will be not work if click
        //showNextButton: false,
        //freeze: true,  // user cannot swip left or right
        animationDuration: 1000,  //button will be work

      ),
    );
  }

  Widget buildImage(String path) {
    return Center(
      child: Image.asset(path, width: 450),
    );
  }

  PageDecoration getDecorations() {
    return PageDecoration(
        titleTextStyle: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
        bodyTextStyle: TextStyle(fontSize: 25),
        descriptionPadding: EdgeInsets.all(16).copyWith(bottom: 0),
        imagePadding: EdgeInsets.all(24),
        pageColor: Colors.white);
        
  }

  DotsDecorator gotdotsDecorator() {
    return DotsDecorator(
      activeColor: Colors.orange,
      size: Size(15, 15),
      activeSize: Size(22,10),
      activeShape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(24)

      ),
    );
  }
}


Happy Coding :)
...........................................................................................................................................................................................................................
Example :#2 [ Slider ]

https://pub.dev/packages/carousel_pro/install
  carousel_pro: ^1.0.0




Happy Coding :)
...........................................................................................................................................................................................................................
Example :#3 []

Happy Coding :)
Posted by at No comments:

Saturday, December 12, 2020

Banner | Chip | Expansion

 ...................................................................................................................................................................................................................................
Example :#1 [ Banner ]

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainScreen(),
     // getPages: Router.route,
      //initialRoute: '/login',
    );
  }
}


class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.deepPurple,
        title: Text('AbodeXD to Flutter'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Align(
          alignment: Alignment.topCenter,
          child: Banner(
            message: 'Offer 20% off',
            location: BannerLocation.topEnd,
            color: Colors.red,
            child: Container(
              height: 200,
              width: 200,
              child: Image.network(
                'https://upload.wikimedia.org/wikipedia/commons/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg',
                fit: BoxFit.fill,
              ),
            ),
          ),
        ),
      ),
    );
  }
}



Happy Coding :)
 ...................................................................................................................................................................................................................................
Example :#2 []


Happy Coding :)
 ...................................................................................................................................................................................................................................
Example :#3 []


Happy Coding :)
 ...................................................................................................................................................................................................................................
Example :#4 []
Happy Coding :)

Posted by at No comments:

Sunday, December 6, 2020

GetX

 Installation
Add Get to your pubspec.yaml file:
  get: ^3.22.2
https://pub.dev/packages/get/install

Import get in files that will be used.
import 'package:get/get.dart';

Tips: #1


...............................................................................................................................................................................................................................
Example :#1[]

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  final CounterController controller = Get.put(CounterController());
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => controller.increment(),
      ),
      body: Center(
        child: Obx(() => Text( '${controller.count}', )),
      ),
    );
  }
}

class CounterController extends GetxController {
  var count = 0.obs;
  void increment() => count++;
}






Happy Coding :)
...............................................................................................................................................................................................................................
Example :#2[]





Happy Coding :)
...............................................................................................................................................................................................................................
Example :#3[ ]

import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class _HomeState extends State<Home> {
  Counter counter = Get.put(Counter());

  int co;

  @override
  void initState() {
    super.initState();
    counter.startStream();
  }

  void AddData() {
    Map<String, int> demodate = {
      "count": (co + 1).toInt(),
    };
    DocumentReference documentReference =
        FirebaseFirestore.instance.collection('data').doc('counterState');
    documentReference.update(demodate);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () => AddData(),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: StreamBuilder(
                //stream: counter.streamController.stream,
                stream: counter.streamController.stream,

                builder: (context, snapshot) {
                  co = snapshot.data;
                  return Text('Data: $co');
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

class Counter extends GetxController {
  StreamController<int> streamController = StreamController<int>();
  
  Stream<DocumentSnapshot> pathStream = FirebaseFirestore.instance
      .collection('data')
      .doc('counterState')
      .snapshots();

  void startStream() {
    pathStream.listen((event) {
      streamController.sink.add(event.data()['count']);
    });
  }

  @override
  void onClose() {
    streamController.close();
  }
}
....................
import 'package:flutter/material.dart';
import 'package:getProject/screens/home.dart';
import 'package:get/get.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Home(),
    );
  }
}

Happy Coding :)
...............................................................................................................................................................................................................................
Example :#4[]



Happy Coding :)
Posted by at No comments:
Subscribe to: Posts (Atom)