Flutter-for-Mobile-Application-Session-2

We will set-up a clean project to work on the topic "Spotify-Clone" using flutter.

Command to create the flutter project:
flutter create project-name

flutter create spotify-clone
cd spotify-clone
code .

Change organisation name:
To set the package name for your application, then we need to change the organization name.

Navigate to android > app > build.gradle folder

Locate android:

Change namespace "com.your_name.project_name"

To start our project:

Navigate to root > lib > main.dart

• To create the Splash screen, create a new folder called layout in the lib folder:
  
• Somewhat path looks like: spotify-clone > lib > layouts > splashscreen.dart
• Type stful and hit enter to create a stateful widget.
• Name the class as Splash

import 'package:flutter/material.dart';
import 'package:ia/screens/home.dart';

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

  @override
  State<Splash> createState() => _SplashState();
}

class _SplashState extends State<Splash> {
  @override
  void initState() {
    super.initState();
    navToHome();
  }

  navToHome() async {
    await Future.delayed(const Duration(milliseconds: 2000), () {});
    Navigator.pushReplacement(
        context, MaterialPageRoute(builder: (context) => const Home()));
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
        backgroundColor: Color(0xFF393646),
        body: Center(
          child: Image(image: AssetImage('assets/splash.png')),
        ));
  }
}

• Install Thunder Client Extension using VScode extension section or click here to download.

• Creating the Input field to hold the value to search a song
  
• Type stful and hit enter to create a stateful widget.
• Name the class as Home

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: Center(
        child: Column(
          children: [
            TextField(onSubmitted: (value) => {
           },
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Search Song',
              ),
            ),
          ],
        ),
      ),
    );
  }
}