Simple way to create Gradient color in Flutter?

This code is a simple Flutter app that demonstrates how to create a gradient color. Here's a breakdown of the code:


Gradient-color


  • The main function is the entry point of the Flutter app. It runs the MyApp widget using the runApp function.
  • MyApp is a StatelessWidget that returns a MaterialApp widget. The MaterialApp widget sets the title of the app to MyShop, sets the theme data (primarySwatch, accentColor, and fontFamily), and sets the home screen to GradientColor.
  • GradientColor is a StatelessWidget that returns a Scaffold widget. The Scaffold widget contains an app bar with a title Gradient Color and a body that is a Container widget with a BoxDecoration that has a LinearGradient as its background. The LinearGradient has two colors Colors.red and Colors.yellow and is defined to start from the top left and end at the bottom right of the Container.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyShop',
      theme: ThemeData(
        primarySwatch: Colors.orange,
        accentColor: Colors.deepOrange,
        fontFamily: 'Lato',
      ),
      home: GradientColor(),
    );
  }
}

class GradientColor extends StatelessWidget {
  const GradientColor({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gradient Color'),
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Colors.red, Colors.yellow],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight),
        ),
      ),
    );
  }
}

This code creates a simple app with a gradient color in the body of the Scaffold widget.

Comments

Popular posts from this blog

Error Handling in Flutter - Gradle issue

How to Make a Dynamic and Trending ListView with Flutter Widgets?

Understanding API integration with Getx State management