I already made it work on my note_cards.dart but i cant seem to make it display the Gradient background assigned to my card when i create/open the note_card. Any help is welcome. Thank you in advance!

This is my note_editor.dart:

import 'dart:math';

import 'package:BetterNotes/style/app_style.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

class NoteEditorScreen extends StatefulWidget {
  const NoteEditorScreen({Key? key}) : super(key: key);

  @override
  State<NoteEditorScreen> createState() => _NoteEditorScreenState();
}

class _NoteEditorScreenState extends State<NoteEditorScreen> {
  late int color_id;

  final TextEditingController _titleController = TextEditingController();
  final TextEditingController _mainController = TextEditingController();
  @override
  void initState() {
    super.initState();
    color_id = Random().nextInt(AppStyle.cardsColor.length);
  }

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        iconTheme: const IconThemeData(color: Colors.black),
        title: const Text(
          "Add a new Note",
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: FutureBuilder(
        future: AppStyle.cardsColor['color_id'],
        builder: (BuildContext context, AsyncSnapshot<List<Color>> snapshot) {
          if (snapshot.hasData) {
            return Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [snapshot.data![color_id], Colors.white],
                ),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    TextField(
                      controller: _titleController,
                      decoration: const InputDecoration(
                          border: InputBorder.none, hintText: 'Note Title'),
                      style: AppStyle.mainTitle,
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    TextField(
                      controller: _mainController,
                      keyboardType: TextInputType.multiline,
                      maxLines: null,
                      decoration: const InputDecoration(
                          border: InputBorder.none, hintText: 'Note Content'),
                      style: AppStyle.mainContent,
                    ),
                  ],
                ),
              ),
            );
          } else {
            return Container();
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: AppStyle.accentColor,
        onPressed: () async {
          FirebaseFirestore.instance.collection('notes').add({
            'note_title': _titleController.text,
            'note_content': _mainController.text,
            'color_id': color_id
          }).then((value) {
            print(value.id);
            Navigator.pop(context);
          }).catchError(
              (error) => print('Failed to add new Note due to $error'));
        },
        child: const Icon(Icons.save),
      ),
    );
  }
}

and this is my app_style.dart:

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:google_fonts/google_fonts.dart';

class AppStyle {
  static Color bgColor = const Color(0xffffffff);
  static Color mainColor = const Color(0xff000000);
  static Color accentColor = const Color(0xFF0065FF);

  // Setting the Cards different Color

  static List<LinearGradient> cardsColor = [
    const LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.topRight,
        colors: [Colors.white, Colors.white]),
    LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.topRight,
        colors: [Colors.red.shade100, Colors.red.shade200]),
    LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.topRight,
        colors: [Colors.pink.shade100, Colors.pink.shade200]),
    LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.topRight,
        colors: [Colors.orange.shade100, Colors.orange.shade200]),
    LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.topRight,
        colors: [Colors.yellow.shade100, Colors.yellow.shade200]),
    LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.topRight,
        colors: [Colors.green.shade100, Colors.green.shade900]),
    LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.topRight,
        colors: [Colors.blue.shade100, Colors.blue.shade200]),
    LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.topRight,
        colors: [Colors.blueGrey.shade100, Colors.blueGrey.shade200]),
  ];

  // Setting the text style

  static TextStyle mainTitle =
      GoogleFonts.roboto(fontSize: 18, fontWeight: FontWeight.bold);

  static TextStyle mainContent =
      GoogleFonts.nunito(fontSize: 16, fontWeight: FontWeight.bold);

  static TextStyle dateTitle =
      GoogleFonts.nunito(fontSize: 16, fontWeight: FontWeight.w500);
}

I have tried to use late and final on the color_id, changed the body to FutureBuilder.

CodePudding user response：

It is a pretty easy fix you have accidentally added List in your FutureBuilder instead of List which you are trying to pass in your future. Instead of this:

FutureBuilder(
        future: AppStyle.cardsColor['color_id'],
        builder: (BuildContext context, AsyncSnapshot<List<Color>> snapshot) {

Try this:

FutureBuilder(
        future: AppStyle.cardsColor['color_id'],
        builder: (BuildContext context, AsyncSnapshot<List<LinearGradient>> snapshot) {