Ui 2

 

OnBoardingScreen With LoginScreen

# UI

# OnBoardingScreen Code

import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:ui/core/data/page_data.dart';
import 'package:ui/view/screen/log_in_screen.dart';
import 'package:ui/view/widget/custom_button_widget.dart';
import 'package:ui/view/widget/custom_text_widget.dart';

class OnBoardingScreen extends StatefulWidget {
  const OnBoardingScreen({super.key});

  @override
  State<OnBoardingScreen> createState() => _OnBoardingScreenState();
}

class _OnBoardingScreenState extends State<OnBoardingScreen> {
  PageController controller = PageController(initialPage: 0);
  int currentPage = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        //w
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: PageView.builder(
                onPageChanged: (index) {
                  setState(() {
                    currentPage = index;
                  });
                },
                controller: controller,
                itemCount: pageData.length,
                itemBuilder: (context, i) {
                  return Column(
                    children: [
                      Image.asset(
                        pageData[i].imagePath,
                      ),
                      const SizedBox(
                        height: 40,
                      ),
                      CustomTextWidget(
                        text: pageData[i].title,
                        fontWeight: FontWeight.w500,
                        size: 20,
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      CustomTextWidget(
                        text: pageData[i].mainText,
                        fontWeight: FontWeight.normal,
                        size: 16,
                      ),
                    ],
                  );
                },
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: SmoothPageIndicator(
                controller: controller,
                count: pageData.length,
                effect: const ExpandingDotsEffect(
                  expansionFactor: 3.5,
                  dotHeight: 13,
                  dotWidth: 13,
                ),
              ),
            ),
            const SizedBox(
              height: 30,
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: CustomButtonWidget(
                text: currentPage != pageData.length - 1 ? 'Skip' : 'Continue',
                radius: 10,
                onPress: () => currentPage != pageData.length - 1
                    ? controller.animateToPage(
                        pageData.length,
                        duration: const Duration(milliseconds: 300),
                        curve: Curves.easeIn,
                      )
                    : Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const LoginScreen(),
                        ),
                      ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

# LogIn Code

import 'package:flutter/material.dart';
import 'package:ui/view/widget/auth_text_field_widget.dart';
import 'package:ui/view/widget/custom_button_widget.dart';
import 'package:ui/view/widget/custom_text_widget.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  bool isHide = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 10),
          // crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const CustomTextWidget(
              text: 'Hi Welcome Back 👋',
              fontWeight: FontWeight.bold,
              size: 25,
            ),
            const CustomTextWidget(
              text: 'We happy to see you sign in to your Account',
              fontWeight: FontWeight.normal,
              size: 15,
              color: Colors.grey,
            ),
            Form(
              child: Column(
                children: [
                  AuthTextFieldWidget(
                    text: 'Email',
                  ),
                  SizedBox(
                    height: 30,
                  ),
                  AuthTextFieldWidget(
                    isHide: isHide,
                    text: 'Password',
                    icon: IconButton(
                      icon: Icon(Icons.remove_red_eye_outlined),
                      onPressed: () {
                        setState(() {
                          isHide = !isHide;
                        });
                      },
                    ),
                  ),
                ],
              ),
            ),
            TextButton(
              child: const CustomTextWidget(
                text: 'Forget Password?',
                fontWeight: FontWeight.bold,
                size: 15,
              ),
              onPressed: () {},
              style: TextButton.styleFrom(
                alignment: Alignment.bottomRight,
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            CustomButtonWidget(
              text: 'Login',
              radius: 50,
              onPress: () {},
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const CustomTextWidget(
                  text: 'Dont’t hava an account?',
                  fontWeight: FontWeight.normal,
                  size: 15,
                  color: Colors.grey,
                ),
                TextButton(
                  onPressed: () {},
                  style: TextButton.styleFrom(
                    alignment: Alignment.bottomRight,
                  ),
                  child: const CustomTextWidget(
                    text: 'Create here',
                    fontWeight: FontWeight.bold,
                    size: 15,
                    color: Colors.indigo,
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 30,
            ),
            Row(
              children: [
                Expanded(
                  child: Divider(),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 10),
                  child: Text(
                    'Or sign in with',
                    style: TextStyle(
                      color: Colors.grey,
                    ),
                  ),
                ),
                Expanded(
                  child: Divider(),
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            ElevatedButton.icon(
              onPressed: () {},
              icon: Icon(
                Icons.email,
                color: Colors.white,
              ),
              label: CustomTextWidget(
                text: 'Continue with Google',
                fontWeight: FontWeight.normal,
                size: 13,
                color: Colors.white,
              ),
              style: ElevatedButton.styleFrom(
                minimumSize: Size(50, 50),
                backgroundColor: Colors.indigo,
              ),
            )
          ],
        ),
      ),
    );
  }
}




# Widgets Code

import 'package:flutter/material.dart';

class AuthTextFieldWidget extends StatelessWidget {
  final String text;
  final Widget? icon;
  final bool? isHide;
  const AuthTextFieldWidget(
      {super.key, required this.text, this.icon, this.isHide});

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      obscureText: isHide ?? false,
      decoration: InputDecoration(
        fillColor: const Color(0xFFe7e0eb),
        filled: true,
        hintText: text,
        hintStyle: TextStyle(
          color: Colors.grey,
        ),
        suffixIcon: icon,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(1),
          borderSide: BorderSide.none,
        ),
      ),
    );
  }
}

---------------------------------------------------------------------

import 'package:flutter/material.dart';

class CustomButtonWidget extends StatelessWidget {
  final void Function()? onPress;
  final String text;
  final double radius;
  const CustomButtonWidget(
      {super.key, this.onPress, required this.text, required this.radius});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPress,
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.indigo,
        minimumSize: const Size(
          100,
          50,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(
            radius,
          ),
        ),
      ),
      child: Text(
        text,
        style: const TextStyle(
          color: Colors.white,
        ),
      ),
    );
  }
}

------------------------------------------------------------------

class CustomTextWidget extends StatelessWidget {
  final String text;
  final FontWeight fontWeight;
  final double size;
  final Color? color;
  const CustomTextWidget(
      {super.key,
      required this.text,
      required this.fontWeight,
      required this.size,
      this.color});

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      textAlign: TextAlign.center,
      style: TextStyle(
          fontFamily: 'Poppins',
          fontWeight: fontWeight,
          fontSize: size,
          color: color ?? Colors.black),
    );
  }
}

# Model && Data Code

class PageModel {
  final String imagePath, title, mainText;

  PageModel({
    required this.imagePath,
    required this.title,
    required this.mainText,
  });
}

import 'package:ui/core/model/page_model.dart';

String imagePath = 'assets/images/';

List<PageModel> pageData = [
  PageModel(
    imagePath: '$imagePath/1.png',
    title: 'Welcome to Note App',
    mainText: "Revolutionize the way you manage your health, starting now",
  ),
  PageModel(
    imagePath: '$imagePath/2.png',
    title: "Explore Advanced Healthcare Solutions",
    mainText:
        "Access all essential healthcare tools in one convenient place- no more switching between the apps!",
  ),
  PageModel(
    imagePath: '$imagePath/3.png',
    title: " Instant Disease Analysis",
    mainText:
        "Scan images for accurate disease identification and personalized prescriptions.",
  ),
];

# Links

PageView Widget

SmoothPageIndicator Widget

# Questions

Q: What is the PageView.builder?

A: The PageView.builder widget is used to create a scrollable list of pages that are built dynamically based on an underlying data source. It allows you to create a set of pages that can be horizontally scrolled through, similar to a carousel or a slideshow.

Q: How can i make a text with different color in the sentence?

A: To make a text with different colors within a sentence in Flutter, you can use the RichText widget along with TextSpan and TextStyle to apply different styles and colors to different parts of the text.

Q: What is the OnPageChanged in the PageView.builder do?

A: The onPageChanged property in PageView.builder is a callback function that gets called whenever the currently displayed page in the PageView changes. It provides you with the new index of the page that becomes the current page.

Q: What is the model and data used for ? 

A: The terms "model" and "data" are closely related and often used together to represent the underlying data structure and its management in an application.

Model: In the context of Flutter, a model refers to a class or data structure that represents a specific entity or concept in your application. It defines the structure, properties, and behavior of the data being represented. For example, in a task management app, you might have a "Task" model that includes properties like title, description, due date, and status. The model class typically encapsulates the data and can include methods for manipulating or accessing the data.

Data: Data in Flutter generally refers to the actual information or values that are stored, retrieved, and manipulated in the application. It can include user input, fetched data from an API, data stored in a local database, or any other form of information used by the application. Data is often represented using models to provide a structured and organized way to manage and interact with the data.

Q: Difference between statelessWidget and statefulWidget?

A: StatelessWidget: As the name suggests, a StatelessWidget is immutable and does not have any mutable state. It represents a component that receives some input (called "props" or "parameters") and returns a rendered UI based on that input. Once created, a StatelessWidget cannot change its properties or update its UI. It rebuilds the entire UI whenever the input changes.

StatefulWidget: Unlike StatelessWidget, a StatefulWidget is mutable and can maintain internal state that can be updated over time. It consists of two classes: the StatefulWidget class, which is immutable and holds the configuration, and the corresponding State class, which is mutable and holds the state. When the state changes, the State object notifies the framework to rebuild the UI.