How can I create a background like how I have designed a image below in flutter, and I wanted to know the standards to be followed so that it is adjustable to all window size including app and web. Please help me as I am completely new to flutter. In detail: I wanted to created a standard background like below image and use the same throughout my app as a standard background. The white background should be adjustable to move as per the content in the screen.

How can I create a background like how I have designed a image below in flutter, and I wanted to know the standards to be followed so that it is adjustable to all window size including app and web. Please help me as I am completely new to flutter. In detail: I wanted to created a standard background like below image and use the same throughout my app as a standard background. The white background should be adjustable to move as per the content in the screen.

• flutter
• flutter-animation

Share Improve this question Follow asked Nov 20, 2024 at 21:03 Razer WaranRazer Waran 3911 silver badge66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Let's break down your tasks:

1. Create a standard gradient color background that will be used throughout you app.
2. How to do this specific authentication page.

1. Create standard gradient color background

const kGradientColor = LinearGradient(colors: [
  Colors.red,
  Colors.blue,
]);

      Scaffold(
        appBar: AppBar(
          flexibleSpace: Container(
            decoration: const BoxDecoration(
              gradient: kGradientColor,
            ),
          ),
          title: const Text("YOUR APP BAR"),
        ),
        body: Container(
          decoration: const BoxDecoration(
            gradient: kGradientColor,
          ),
          child: const Center(child: Text("YOUR MAIN BODY")),
        ),
      ),

Well, to be honest, I don't find any way to put gradient color into general Flutter ThemeData, or inside Scaffold. This might be the only way.

To reduce your working, you could create a general widget for AppBar. You could follow this instruction: How to create a custom AppBar widget?

2. How to do UI for authentication page

You can read about SliverAppBar: https://api.flutter.dev/flutter/material/SliverAppBar-class.html

This is a complex & advanced Flutter widgets. There are several kinds of Sliver, but at this moment, for the beginner, you just need to care about it.

import 'package:flutter/material.dart';

/// Flutter code sample for [SliverAppBar].

void main() {
  runApp(const StretchableSliverAppBar());
}

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

  @override
  State<StretchableSliverAppBar> createState() =>
      _StretchableSliverAppBarState();
}

class _StretchableSliverAppBarState extends State<StretchableSliverAppBar> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            const SliverAppBar(
              stretch: true,
              stretchTriggerOffset: 300.0,
              expandedHeight: 200.0,
              flexibleSpace: const FlexibleSpaceBar(
                title: Text('SliverAppBar'),
                background: FlutterLogo(),
              ),
            ),
            SliverToBoxAdapter(
              child: Container(
                height: 600,
                decoration: const BoxDecoration(
                  gradient: kGradientColor,
                ),
                child: const Center(child: Text("YOUR AUTH BODY")),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

const kGradientColor = LinearGradient(colors: [
  Colors.red,
  Colors.blue,
]);