🙂 İNSANLARIN EN HAYIRLISI INSANLARA FAYDALI OLANDIR 🙂

Ramazan HABER / FLUTTER / flutter modern neumorphic tasarım

1-) FLUTTER - flutter modern neumorphic tasarım

 

kaynak : https://pub.dev/packages/flutter_neumorphic

ilk olarak bunu terminale yaz ve çalıştır : flutter pub add flutter_neumorphic

 

 

Neumorphic(
  style:
NeumorphicStyle(
    shape:
NeumorphicShape.concave,
    boxShape:
        
NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
    depth:
8,
    lightSource:
LightSource.topLeft,
  ),
  child:
Container(
    height:
200,
    width:
200,
    child:
Column(
      mainAxisAlignment:
MainAxisAlignment.center,
      children: [
        
NeumorphicButton(
          child:
Text("Login2"),
          onPressed: () {},
        ),
      ],
    ),
  ),
),

 

 

 

           

 

 

******************KODLARIN HEPSİ LOGİN EKRANI ÖRNEK*************

 

login_screen.dart

 

import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';

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

  
@override
  
State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  
@override
  
Widget build(BuildContext context) {
    
return SafeArea(
      child:
Scaffold(
        body:
Center(
          child:
Column(
            mainAxisAlignment:
MainAxisAlignment.center,
            children: [
              
Neumorphic(
                style:
NeumorphicStyle(
                  shape:
NeumorphicShape.concave,
                  boxShape:
                      
NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
                  depth:
8,
                  lightSource:
LightSource.topLeft,
                ),
                child:
Container(
                  height:
200,
                  width:
200,
                  child:
Column(
                    mainAxisAlignment:
MainAxisAlignment.center,
                    children: [
                      
NeumorphicButton(
                        child:
Text("Login2"),
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

main.dart

 

import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
import 'package:rokethizmet/screens/loginscreen/login_screen.dart';

void main() {
  runApp(
MyApp());
}

class MyApp extends StatelessWidget {
  
// This widget is the root of your application.
  
@override
  
Widget build(BuildContext context) {
    
return NeumorphicApp(
      debugShowCheckedModeBanner:
false,
      title:
'Neumorphic App',
      themeMode:
ThemeMode.dark,
      theme:
NeumorphicThemeData(
        baseColor:
Color(0xFFFFFFFF),
        lightSource:
LightSource.topLeft,
        depth:
10,
      ),
      darkTheme:
NeumorphicThemeData(
        baseColor:
Color(0xFF3E3E3E),
        lightSource:
LightSource.topLeft,
        depth:
6,
      ),
      home:
LoginScreen(),
    );
  }
}

 

 

EKRAN GÖRÜNTÜSÜ

 

 2022 Ağustos 08 Pazartesi
 344