How to apply a style to a container

[KiraResari]

I've been puzzling about this for two days now, so let me ask:

I know it is possible to apply styles like background colors and frames to containers. I can see that it works in the sample projects, but...

...how does it work? I've been trying to make sense of if, but no matter what I try, all I get is error messages.

For an example, let us consider this case: I have an iced Element. I want to put it in a colored box, somewhat like this:

const SURFACE: Color = Color::from_rgb(
    0x40 as f32 / 255.0,
    0x44 as f32 / 255.0,
    0x4B as f32 / 255.0,
);

impl<'a> Panel{
    pub fn from(string: &str) -> Container<Message>{
        let mut style = container::Style::default();
        style.background = SURFACE.into();

        Container::new(
            Row::new()
                .padding(20)
                .align_items(Align::Center)
                .push(Text::new(str.to_String()))
        ).style(style)
    }
}

That doesn't work because of this error:

error[E0277]: the trait bound `iced::container::Style: From<iced::container::Style>` is not satisfied
  --> src\kanji_panel.rs:26:17
   |
26 |         ).style(style)
   |           ----- ^^^^^ expected an implementor of trait `From<iced::container::Style>`
   |           |
   |           required by a bound introduced by this call
   |
   = note: required because of the requirements on the impl of `From<iced::container::Style>` for `Box<(dyn iced::container::StyleSheet + 'static)>`
   = note: required because of the requirements on the impl of `Into<Box<(dyn iced::container::StyleSheet + 'static)>>` for `iced::container::Style`

I've tried to figure out how this works for two days now, looking at the sample projects, but wasn't able to figure it out. Can someone please explain to me how this is supposed to work?

[13r0ck]

The error is saying you haven’t implemented ‘style’ correctly.

Implementing a style has quite some boiler plate.
https://github.com/iced-rs/iced/blob/master/examples/styling/src/main.rs#L157

or if the light/dark is confusing here is an example from a personal project
https://github.com/13r0ck/bathtub/blob/main/src/style.rs

Basically your style needs to implement ‘From’ for each widget you want to put it on, then that let’s rust “find” the right value for each widget, which you then you can implement the style sheet for each widget

https://github.com/13r0ck/bathtub/blob/main/src/style.rs#L125

[KiraResari]

Thanks! That helped a lot! Especially the bathtub-sample was a great help.

So, for the record, here's the programmatic solution of my problem. I figure this is probably also a pretty minimal example of how to apply styles in iced:

pub struct MyPanel{
}

impl MyPanel{
    pub fn from(string: &str) -> Container<Message>{
        let mut style = container::Style::default();
        style.background = SURFACE.into();

        Container::new(
            Row::new()
                .padding(20)
                .align_items(Align::Center)
                .push(Text::new(str.to_String()))
        ).style(MyTheme::MyStyle)
    }
}

pub enum MyTheme{
    MyStyle,
}

impl From<MyTheme> for Box<dyn container::StyleSheet> {
    fn from(theme: MyTheme) -> Self {
        match theme {
            MyTheme::MyStyle=> my_style::Container.into(),
        }
    }
}

mod my_style{
    use iced::{container, Color};

    pub struct Container;

    impl container::StyleSheet for Container {
        fn style(&self) -> container::Style {
            container::Style {
                text_color: Some(Color::WHITE),
                background: Color::from_rgb8(249, 40, 20).into(),
                border_color: Color::from_rgb8(229, 20, 0),
                border_width: 5.0,
                border_radius: 8.0,
            }
        }
    }
}

[patientplatypus6]

Can you link to a working example? Your code doesn't compile and I can't make it work.

peterweyand@Peters-MacBook-Pro project1_1 % cargo build && cargo run
   Compiling project1_1 v0.1.0 (/Users/peterweyand/Code/rustprojects/project1.1/project1_1)
error[E0432]: unresolved import `iced::container`
  --> src/main.rs:31:16
   |
31 |     use iced::{container, Color};
   |                ^^^^^^^^^ no `container` in the root

error[E0433]: failed to resolve: use of undeclared crate or module `container`
 --> src/main.rs:6:25
  |
6 |         let mut style = container::Style::default();
  |                         ^^^^^^^^^ use of undeclared crate or module `container`

error[E0433]: failed to resolve: use of undeclared type `Align`
  --> src/main.rs:12:30
   |
12 |                 .align_items(Align::Center)
   |                              ^^^^^ use of undeclared type `Align`

error[E0433]: failed to resolve: use of undeclared crate or module `container`
  --> src/main.rs:22:32
   |
22 | impl From<MyTheme> for Box<dyn container::StyleSheet> {
   |                                ^^^^^^^^^ use of undeclared crate or module `container`

error[E0412]: cannot find type `Container` in this scope
 --> src/main.rs:5:34
  |
5 |     pub fn from(string: &str) -> Container<Message>{
  |                                  ^^^^^^^^^ not found in this scope
  |
help: consider importing one of these items
  |
1 | use crate::my_style::Container;
  |
1 | use iced::theme::Container;
  |
1 | use iced::widget::Container;
  |
1 | use iced_native::Container;
  |
    and 1 other candidate

error[E0412]: cannot find type `Message` in this scope
 --> src/main.rs:5:44
  |
4 | impl MyPanel{
  |     - help: you might be missing a type parameter: `<Message>`
5 |     pub fn from(string: &str) -> Container<Message>{
  |                                            ^^^^^^^ not found in this scope

error[E0425]: cannot find value `SURFACE` in this scope
 --> src/main.rs:7:28
  |
7 |         style.background = SURFACE.into();
  |                            ^^^^^^^ not found in this scope

error[E0433]: failed to resolve: use of undeclared type `Container`
 --> src/main.rs:9:9
  |
9 |         Container::new(
  |         ^^^^^^^^^ not found in this scope
  |
help: consider importing one of these items
  |
1 | use crate::my_style::Container;
  |
1 | use iced::theme::Container;
  |
1 | use iced::widget::Container;
  |
1 | use iced_native::Container;
  |
    and 1 other candidate

error[E0433]: failed to resolve: use of undeclared type `Row`
  --> src/main.rs:10:13
   |
10 |             Row::new()
   |             ^^^ not found in this scope
   |
help: consider importing one of these items
   |
1  | use iced::widget::Row;
   |
1  | use iced_native::Row;
   |

error[E0433]: failed to resolve: use of undeclared type `Text`
  --> src/main.rs:13:23
   |
13 |                 .push(Text::new(str.to_String()))
   |                       ^^^^ not found in this scope
   |
help: consider importing one of these items
   |
1  | use iced::theme::Text;
   |
1  | use iced::widget::Text;
   |
1  | use iced_native::Text;
   |
1  | use iced_style::theme::Text;
   |

error[E0423]: expected value, found builtin type `str`
  --> src/main.rs:13:33
   |
13 |                 .push(Text::new(str.to_String()))
   |                                 ^^^ not a value

error[E0601]: `main` function not found in crate `project1_1`
  --> src/main.rs:46:2
   |
46 | }
   |  ^ consider adding a `main` function to `src/main.rs`

Some errors have detailed explanations: E0412, E0423, E0425, E0432, E0433, E0601.
For more information about an error, try `rustc --explain E0412`.
error: could not compile `project1_1` due to 12 previous errors

I can't just go about adding imports as (for example) the error for container is

error[E0433]: failed to resolve: use of undeclared crate or module `container`
 --> src/main.rs:6:25
  |
6 |         let mut style = container::Style::default();
  |                         ^^^^^^^^^ use of undeclared crate or module `container`

and in the docs (https://docs.rs/iced/latest/iced/widget/container/index.html) container doesn't have a Style import. I don't know what version this is. Basically, this answer isn't useful to someone that wants to replicate what you did.

This is my Cargo.toml

[package]
name = "project1_1"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
utility = { path = "./src/utility" }
iced = { git = "https://github.com/iced-rs/iced" }
iced_native = "0.4"
iced_style = "0.5"
iced_core = "0.5"

[KiraResari]

Feel free to check out my project where I use this: https://github.com/KiraResari/kanji_tree